diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/src/textures/Texture.js b/src/textures/Texture.js index 1426375..f8e8609 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -1,9 +1,8 @@ -var Rectangle = require('./Rectangle'); - -TextureCache = {}; -FrameCache = {}; - -TextureCacheIdGenerator = 0; +var BaseTexture = require('./BaseTexture'), + Rectangle = require('./Rectangle'), + EventTarget = require('../utils/EventTarget'), + TextureUvs = require('../renderers/webgl/utils/TextureUvs'), + utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added @@ -100,7 +99,9 @@ this.crop = crop || new Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { - if (this.noFrame) frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(frame); } else { @@ -122,7 +123,9 @@ var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); - if (this.noFrame) this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(this.frame); @@ -135,7 +138,9 @@ * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { - if (destroyBase) this.baseTexture.destroy(); + if (destroyBase) { + this.baseTexture.destroy(); + } this.valid = false; }; @@ -170,7 +175,9 @@ this.frame.height = this.trim.height; } - if (this.valid) this._updateUvs(); + if (this.valid) { + this._updateUvs(); + } }; @@ -212,11 +219,11 @@ * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var texture = TextureCache[imageUrl]; + var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - TextureCache[imageUrl] = texture; + utils.TextureCache[imageUrl] = texture; } return texture; @@ -231,8 +238,10 @@ * @return Texture */ Texture.fromFrame = function (frameId) { - var texture = TextureCache[frameId]; - if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + var texture = utils.TextureCache[frameId]; + if (!texture) { + throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + } return texture; }; @@ -252,45 +261,30 @@ }; /** - * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { - TextureCache[id] = texture; + utils.TextureCache[id] = texture; }; /** - * Remove a texture from the global TextureCache. + * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { - var texture = TextureCache[id]; + var texture = utils.TextureCache[id]; - delete TextureCache[id]; - delete BaseTextureCache[id]; + delete utils.TextureCache[id]; + delete utils.BaseTextureCache[id]; return texture; }; -function TextureUvs() { - this.x0 = 0; - this.y0 = 0; - - this.x1 = 0; - this.y1 = 0; - - this.x2 = 0; - this.y2 = 0; - - this.x3 = 0; - this.y3 = 0; -}; - Texture.emptyTexture = new Texture(new BaseTexture()); - diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/src/textures/Texture.js b/src/textures/Texture.js index 1426375..f8e8609 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -1,9 +1,8 @@ -var Rectangle = require('./Rectangle'); - -TextureCache = {}; -FrameCache = {}; - -TextureCacheIdGenerator = 0; +var BaseTexture = require('./BaseTexture'), + Rectangle = require('./Rectangle'), + EventTarget = require('../utils/EventTarget'), + TextureUvs = require('../renderers/webgl/utils/TextureUvs'), + utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added @@ -100,7 +99,9 @@ this.crop = crop || new Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { - if (this.noFrame) frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(frame); } else { @@ -122,7 +123,9 @@ var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); - if (this.noFrame) this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(this.frame); @@ -135,7 +138,9 @@ * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { - if (destroyBase) this.baseTexture.destroy(); + if (destroyBase) { + this.baseTexture.destroy(); + } this.valid = false; }; @@ -170,7 +175,9 @@ this.frame.height = this.trim.height; } - if (this.valid) this._updateUvs(); + if (this.valid) { + this._updateUvs(); + } }; @@ -212,11 +219,11 @@ * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var texture = TextureCache[imageUrl]; + var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - TextureCache[imageUrl] = texture; + utils.TextureCache[imageUrl] = texture; } return texture; @@ -231,8 +238,10 @@ * @return Texture */ Texture.fromFrame = function (frameId) { - var texture = TextureCache[frameId]; - if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + var texture = utils.TextureCache[frameId]; + if (!texture) { + throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + } return texture; }; @@ -252,45 +261,30 @@ }; /** - * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { - TextureCache[id] = texture; + utils.TextureCache[id] = texture; }; /** - * Remove a texture from the global TextureCache. + * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { - var texture = TextureCache[id]; + var texture = utils.TextureCache[id]; - delete TextureCache[id]; - delete BaseTextureCache[id]; + delete utils.TextureCache[id]; + delete utils.BaseTextureCache[id]; return texture; }; -function TextureUvs() { - this.x0 = 0; - this.y0 = 0; - - this.x1 = 0; - this.y1 = 0; - - this.x2 = 0; - this.y2 = 0; - - this.x3 = 0; - this.y3 = 0; -}; - Texture.emptyTexture = new Texture(new BaseTexture()); - diff --git a/src/textures/VideoTexture.js b/src/textures/VideoTexture.js index c3e753d..f61f377 100644 --- a/src/textures/VideoTexture.js +++ b/src/textures/VideoTexture.js @@ -1,3 +1,7 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + utils = require('../utils'); + /** * A texture of a [playing] Video. * @@ -83,8 +87,8 @@ VideoTexture.prototype.destroy = function () { if (this.source && this.source._pixiId) { - BaseTextureCache[ this.source._pixiId ] = null; - delete BaseTextureCache[ this.source._pixiId ]; + utils.BaseTextureCache[ this.source._pixiId ] = null; + delete utils.BaseTextureCache[ this.source._pixiId ]; this.source._pixiId = null; delete this.source._pixiId; @@ -103,14 +107,14 @@ */ VideoTexture.baseTextureFromVideo = function (video, scaleMode) { if (!video._pixiId) { - video._pixiId = 'video_' + TextureCacheIdGenerator++; + video._pixiId = 'video_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[ video._pixiId ]; + var baseTexture = utils.BaseTextureCache[ video._pixiId ]; if (!baseTexture) { baseTexture = new VideoTexture(video, scaleMode); - BaseTextureCache[ video._pixiId ] = baseTexture; + utils.BaseTextureCache[ video._pixiId ] = baseTexture; } return baseTexture; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/src/textures/Texture.js b/src/textures/Texture.js index 1426375..f8e8609 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -1,9 +1,8 @@ -var Rectangle = require('./Rectangle'); - -TextureCache = {}; -FrameCache = {}; - -TextureCacheIdGenerator = 0; +var BaseTexture = require('./BaseTexture'), + Rectangle = require('./Rectangle'), + EventTarget = require('../utils/EventTarget'), + TextureUvs = require('../renderers/webgl/utils/TextureUvs'), + utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added @@ -100,7 +99,9 @@ this.crop = crop || new Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { - if (this.noFrame) frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(frame); } else { @@ -122,7 +123,9 @@ var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); - if (this.noFrame) this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(this.frame); @@ -135,7 +138,9 @@ * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { - if (destroyBase) this.baseTexture.destroy(); + if (destroyBase) { + this.baseTexture.destroy(); + } this.valid = false; }; @@ -170,7 +175,9 @@ this.frame.height = this.trim.height; } - if (this.valid) this._updateUvs(); + if (this.valid) { + this._updateUvs(); + } }; @@ -212,11 +219,11 @@ * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var texture = TextureCache[imageUrl]; + var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - TextureCache[imageUrl] = texture; + utils.TextureCache[imageUrl] = texture; } return texture; @@ -231,8 +238,10 @@ * @return Texture */ Texture.fromFrame = function (frameId) { - var texture = TextureCache[frameId]; - if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + var texture = utils.TextureCache[frameId]; + if (!texture) { + throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + } return texture; }; @@ -252,45 +261,30 @@ }; /** - * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { - TextureCache[id] = texture; + utils.TextureCache[id] = texture; }; /** - * Remove a texture from the global TextureCache. + * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { - var texture = TextureCache[id]; + var texture = utils.TextureCache[id]; - delete TextureCache[id]; - delete BaseTextureCache[id]; + delete utils.TextureCache[id]; + delete utils.BaseTextureCache[id]; return texture; }; -function TextureUvs() { - this.x0 = 0; - this.y0 = 0; - - this.x1 = 0; - this.y1 = 0; - - this.x2 = 0; - this.y2 = 0; - - this.x3 = 0; - this.y3 = 0; -}; - Texture.emptyTexture = new Texture(new BaseTexture()); - diff --git a/src/textures/VideoTexture.js b/src/textures/VideoTexture.js index c3e753d..f61f377 100644 --- a/src/textures/VideoTexture.js +++ b/src/textures/VideoTexture.js @@ -1,3 +1,7 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + utils = require('../utils'); + /** * A texture of a [playing] Video. * @@ -83,8 +87,8 @@ VideoTexture.prototype.destroy = function () { if (this.source && this.source._pixiId) { - BaseTextureCache[ this.source._pixiId ] = null; - delete BaseTextureCache[ this.source._pixiId ]; + utils.BaseTextureCache[ this.source._pixiId ] = null; + delete utils.BaseTextureCache[ this.source._pixiId ]; this.source._pixiId = null; delete this.source._pixiId; @@ -103,14 +107,14 @@ */ VideoTexture.baseTextureFromVideo = function (video, scaleMode) { if (!video._pixiId) { - video._pixiId = 'video_' + TextureCacheIdGenerator++; + video._pixiId = 'video_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[ video._pixiId ]; + var baseTexture = utils.BaseTextureCache[ video._pixiId ]; if (!baseTexture) { baseTexture = new VideoTexture(video, scaleMode); - BaseTextureCache[ video._pixiId ] = baseTexture; + utils.BaseTextureCache[ video._pixiId ] = baseTexture; } return baseTexture; diff --git a/src/utils/Event.js b/src/utils/Event.js deleted file mode 100644 index 0c187ee..0000000 --- a/src/utils/Event.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Creates an homogenous object for tracking events so users can know what to expect. - * - * @class - * @namespace PIXI - * @param target {object} The target object that the event is called on - * @param name {string} The string name of the event that was triggered - * @param data {object} Arbitrary event data to pass along - */ -function Event(target, name, data) { - // for duck typing in the ".on()" function - this.__isEventObject = true; - - /** - * Tracks the state of bubbling propagation. Do not - * set this directly, instead use `event.stopPropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stopped = false; - - /** - * Tracks the state of sibling listener propagation. Do not - * set this directly, instead use `event.stopImmediatePropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stoppedImmediate = false; - - /** - * The original target the event triggered on. - * - * @member {object} - * @readonly - */ - this.target = target; - - /** - * The string name of the event that this represents. - * - * @member {string} - * @readonly - */ - this.type = name; - - /** - * The data that was passed in with this event. - * - * @member {object} - * @readonly - */ - this.data = data; - - /** - * The timestamp when the event occurred. - * - * @member {number} - * @readonly - */ - this.timeStamp = Date.now(); -}; - -/** - * Stops the propagation of events up the scene graph (prevents bubbling). - * - */ -Event.prototype.stopPropagation = function stopPropagation() { - this.stopped = true; -}; - -/** - * Stops the propagation of events to sibling listeners (no longer calls any listeners). - * - */ -Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() { - this.stoppedImmediate = true; -}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/src/textures/Texture.js b/src/textures/Texture.js index 1426375..f8e8609 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -1,9 +1,8 @@ -var Rectangle = require('./Rectangle'); - -TextureCache = {}; -FrameCache = {}; - -TextureCacheIdGenerator = 0; +var BaseTexture = require('./BaseTexture'), + Rectangle = require('./Rectangle'), + EventTarget = require('../utils/EventTarget'), + TextureUvs = require('../renderers/webgl/utils/TextureUvs'), + utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added @@ -100,7 +99,9 @@ this.crop = crop || new Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { - if (this.noFrame) frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(frame); } else { @@ -122,7 +123,9 @@ var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); - if (this.noFrame) this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(this.frame); @@ -135,7 +138,9 @@ * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { - if (destroyBase) this.baseTexture.destroy(); + if (destroyBase) { + this.baseTexture.destroy(); + } this.valid = false; }; @@ -170,7 +175,9 @@ this.frame.height = this.trim.height; } - if (this.valid) this._updateUvs(); + if (this.valid) { + this._updateUvs(); + } }; @@ -212,11 +219,11 @@ * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var texture = TextureCache[imageUrl]; + var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - TextureCache[imageUrl] = texture; + utils.TextureCache[imageUrl] = texture; } return texture; @@ -231,8 +238,10 @@ * @return Texture */ Texture.fromFrame = function (frameId) { - var texture = TextureCache[frameId]; - if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + var texture = utils.TextureCache[frameId]; + if (!texture) { + throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + } return texture; }; @@ -252,45 +261,30 @@ }; /** - * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { - TextureCache[id] = texture; + utils.TextureCache[id] = texture; }; /** - * Remove a texture from the global TextureCache. + * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { - var texture = TextureCache[id]; + var texture = utils.TextureCache[id]; - delete TextureCache[id]; - delete BaseTextureCache[id]; + delete utils.TextureCache[id]; + delete utils.BaseTextureCache[id]; return texture; }; -function TextureUvs() { - this.x0 = 0; - this.y0 = 0; - - this.x1 = 0; - this.y1 = 0; - - this.x2 = 0; - this.y2 = 0; - - this.x3 = 0; - this.y3 = 0; -}; - Texture.emptyTexture = new Texture(new BaseTexture()); - diff --git a/src/textures/VideoTexture.js b/src/textures/VideoTexture.js index c3e753d..f61f377 100644 --- a/src/textures/VideoTexture.js +++ b/src/textures/VideoTexture.js @@ -1,3 +1,7 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + utils = require('../utils'); + /** * A texture of a [playing] Video. * @@ -83,8 +87,8 @@ VideoTexture.prototype.destroy = function () { if (this.source && this.source._pixiId) { - BaseTextureCache[ this.source._pixiId ] = null; - delete BaseTextureCache[ this.source._pixiId ]; + utils.BaseTextureCache[ this.source._pixiId ] = null; + delete utils.BaseTextureCache[ this.source._pixiId ]; this.source._pixiId = null; delete this.source._pixiId; @@ -103,14 +107,14 @@ */ VideoTexture.baseTextureFromVideo = function (video, scaleMode) { if (!video._pixiId) { - video._pixiId = 'video_' + TextureCacheIdGenerator++; + video._pixiId = 'video_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[ video._pixiId ]; + var baseTexture = utils.BaseTextureCache[ video._pixiId ]; if (!baseTexture) { baseTexture = new VideoTexture(video, scaleMode); - BaseTextureCache[ video._pixiId ] = baseTexture; + utils.BaseTextureCache[ video._pixiId ] = baseTexture; } return baseTexture; diff --git a/src/utils/Event.js b/src/utils/Event.js deleted file mode 100644 index 0c187ee..0000000 --- a/src/utils/Event.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Creates an homogenous object for tracking events so users can know what to expect. - * - * @class - * @namespace PIXI - * @param target {object} The target object that the event is called on - * @param name {string} The string name of the event that was triggered - * @param data {object} Arbitrary event data to pass along - */ -function Event(target, name, data) { - // for duck typing in the ".on()" function - this.__isEventObject = true; - - /** - * Tracks the state of bubbling propagation. Do not - * set this directly, instead use `event.stopPropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stopped = false; - - /** - * Tracks the state of sibling listener propagation. Do not - * set this directly, instead use `event.stopImmediatePropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stoppedImmediate = false; - - /** - * The original target the event triggered on. - * - * @member {object} - * @readonly - */ - this.target = target; - - /** - * The string name of the event that this represents. - * - * @member {string} - * @readonly - */ - this.type = name; - - /** - * The data that was passed in with this event. - * - * @member {object} - * @readonly - */ - this.data = data; - - /** - * The timestamp when the event occurred. - * - * @member {number} - * @readonly - */ - this.timeStamp = Date.now(); -}; - -/** - * Stops the propagation of events up the scene graph (prevents bubbling). - * - */ -Event.prototype.stopPropagation = function stopPropagation() { - this.stopped = true; -}; - -/** - * Stops the propagation of events to sibling listeners (no longer calls any listeners). - * - */ -Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() { - this.stoppedImmediate = true; -}; diff --git a/src/utils/EventData.js b/src/utils/EventData.js new file mode 100644 index 0000000..dd0059a --- /dev/null +++ b/src/utils/EventData.js @@ -0,0 +1,81 @@ +/** + * Creates an homogenous object for tracking events so users can know what to expect. + * + * @class + * @namespace PIXI + * @param target {object} The target object that the event is called on + * @param name {string} The string name of the event that was triggered + * @param data {object} Arbitrary event data to pass along + */ +function EventData(target, name, data) { + // for duck typing in the ".on()" function + this.__isEventObject = true; + + /** + * Tracks the state of bubbling propagation. Do not + * set this directly, instead use `event.stopPropagation()` + * + * @member {boolean} + * @private + * @readonly + */ + this.stopped = false; + + /** + * Tracks the state of sibling listener propagation. Do not + * set this directly, instead use `event.stopImmediatePropagation()` + * + * @member {boolean} + * @private + * @readonly + */ + this.stoppedImmediate = false; + + /** + * The original target the event triggered on. + * + * @member {object} + * @readonly + */ + this.target = target; + + /** + * The string name of the event that this represents. + * + * @member {string} + * @readonly + */ + this.type = name; + + /** + * The data that was passed in with this event. + * + * @member {object} + * @readonly + */ + this.data = data; + + /** + * The timestamp when the event occurred. + * + * @member {number} + * @readonly + */ + this.timeStamp = Date.now(); +} + +/** + * Stops the propagation of events up the scene graph (prevents bubbling). + * + */ +EventData.prototype.stopPropagation = function stopPropagation() { + this.stopped = true; +}; + +/** + * Stops the propagation of events to sibling listeners (no longer calls any listeners). + * + */ +EventData.prototype.stopImmediatePropagation = function stopImmediatePropagation() { + this.stoppedImmediate = true; +}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/src/textures/Texture.js b/src/textures/Texture.js index 1426375..f8e8609 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -1,9 +1,8 @@ -var Rectangle = require('./Rectangle'); - -TextureCache = {}; -FrameCache = {}; - -TextureCacheIdGenerator = 0; +var BaseTexture = require('./BaseTexture'), + Rectangle = require('./Rectangle'), + EventTarget = require('../utils/EventTarget'), + TextureUvs = require('../renderers/webgl/utils/TextureUvs'), + utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added @@ -100,7 +99,9 @@ this.crop = crop || new Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { - if (this.noFrame) frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(frame); } else { @@ -122,7 +123,9 @@ var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); - if (this.noFrame) this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(this.frame); @@ -135,7 +138,9 @@ * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { - if (destroyBase) this.baseTexture.destroy(); + if (destroyBase) { + this.baseTexture.destroy(); + } this.valid = false; }; @@ -170,7 +175,9 @@ this.frame.height = this.trim.height; } - if (this.valid) this._updateUvs(); + if (this.valid) { + this._updateUvs(); + } }; @@ -212,11 +219,11 @@ * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var texture = TextureCache[imageUrl]; + var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - TextureCache[imageUrl] = texture; + utils.TextureCache[imageUrl] = texture; } return texture; @@ -231,8 +238,10 @@ * @return Texture */ Texture.fromFrame = function (frameId) { - var texture = TextureCache[frameId]; - if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + var texture = utils.TextureCache[frameId]; + if (!texture) { + throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + } return texture; }; @@ -252,45 +261,30 @@ }; /** - * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { - TextureCache[id] = texture; + utils.TextureCache[id] = texture; }; /** - * Remove a texture from the global TextureCache. + * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { - var texture = TextureCache[id]; + var texture = utils.TextureCache[id]; - delete TextureCache[id]; - delete BaseTextureCache[id]; + delete utils.TextureCache[id]; + delete utils.BaseTextureCache[id]; return texture; }; -function TextureUvs() { - this.x0 = 0; - this.y0 = 0; - - this.x1 = 0; - this.y1 = 0; - - this.x2 = 0; - this.y2 = 0; - - this.x3 = 0; - this.y3 = 0; -}; - Texture.emptyTexture = new Texture(new BaseTexture()); - diff --git a/src/textures/VideoTexture.js b/src/textures/VideoTexture.js index c3e753d..f61f377 100644 --- a/src/textures/VideoTexture.js +++ b/src/textures/VideoTexture.js @@ -1,3 +1,7 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + utils = require('../utils'); + /** * A texture of a [playing] Video. * @@ -83,8 +87,8 @@ VideoTexture.prototype.destroy = function () { if (this.source && this.source._pixiId) { - BaseTextureCache[ this.source._pixiId ] = null; - delete BaseTextureCache[ this.source._pixiId ]; + utils.BaseTextureCache[ this.source._pixiId ] = null; + delete utils.BaseTextureCache[ this.source._pixiId ]; this.source._pixiId = null; delete this.source._pixiId; @@ -103,14 +107,14 @@ */ VideoTexture.baseTextureFromVideo = function (video, scaleMode) { if (!video._pixiId) { - video._pixiId = 'video_' + TextureCacheIdGenerator++; + video._pixiId = 'video_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[ video._pixiId ]; + var baseTexture = utils.BaseTextureCache[ video._pixiId ]; if (!baseTexture) { baseTexture = new VideoTexture(video, scaleMode); - BaseTextureCache[ video._pixiId ] = baseTexture; + utils.BaseTextureCache[ video._pixiId ] = baseTexture; } return baseTexture; diff --git a/src/utils/Event.js b/src/utils/Event.js deleted file mode 100644 index 0c187ee..0000000 --- a/src/utils/Event.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Creates an homogenous object for tracking events so users can know what to expect. - * - * @class - * @namespace PIXI - * @param target {object} The target object that the event is called on - * @param name {string} The string name of the event that was triggered - * @param data {object} Arbitrary event data to pass along - */ -function Event(target, name, data) { - // for duck typing in the ".on()" function - this.__isEventObject = true; - - /** - * Tracks the state of bubbling propagation. Do not - * set this directly, instead use `event.stopPropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stopped = false; - - /** - * Tracks the state of sibling listener propagation. Do not - * set this directly, instead use `event.stopImmediatePropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stoppedImmediate = false; - - /** - * The original target the event triggered on. - * - * @member {object} - * @readonly - */ - this.target = target; - - /** - * The string name of the event that this represents. - * - * @member {string} - * @readonly - */ - this.type = name; - - /** - * The data that was passed in with this event. - * - * @member {object} - * @readonly - */ - this.data = data; - - /** - * The timestamp when the event occurred. - * - * @member {number} - * @readonly - */ - this.timeStamp = Date.now(); -}; - -/** - * Stops the propagation of events up the scene graph (prevents bubbling). - * - */ -Event.prototype.stopPropagation = function stopPropagation() { - this.stopped = true; -}; - -/** - * Stops the propagation of events to sibling listeners (no longer calls any listeners). - * - */ -Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() { - this.stoppedImmediate = true; -}; diff --git a/src/utils/EventData.js b/src/utils/EventData.js new file mode 100644 index 0000000..dd0059a --- /dev/null +++ b/src/utils/EventData.js @@ -0,0 +1,81 @@ +/** + * Creates an homogenous object for tracking events so users can know what to expect. + * + * @class + * @namespace PIXI + * @param target {object} The target object that the event is called on + * @param name {string} The string name of the event that was triggered + * @param data {object} Arbitrary event data to pass along + */ +function EventData(target, name, data) { + // for duck typing in the ".on()" function + this.__isEventObject = true; + + /** + * Tracks the state of bubbling propagation. Do not + * set this directly, instead use `event.stopPropagation()` + * + * @member {boolean} + * @private + * @readonly + */ + this.stopped = false; + + /** + * Tracks the state of sibling listener propagation. Do not + * set this directly, instead use `event.stopImmediatePropagation()` + * + * @member {boolean} + * @private + * @readonly + */ + this.stoppedImmediate = false; + + /** + * The original target the event triggered on. + * + * @member {object} + * @readonly + */ + this.target = target; + + /** + * The string name of the event that this represents. + * + * @member {string} + * @readonly + */ + this.type = name; + + /** + * The data that was passed in with this event. + * + * @member {object} + * @readonly + */ + this.data = data; + + /** + * The timestamp when the event occurred. + * + * @member {number} + * @readonly + */ + this.timeStamp = Date.now(); +} + +/** + * Stops the propagation of events up the scene graph (prevents bubbling). + * + */ +EventData.prototype.stopPropagation = function stopPropagation() { + this.stopped = true; +}; + +/** + * Stops the propagation of events to sibling listeners (no longer calls any listeners). + * + */ +EventData.prototype.stopImmediatePropagation = function stopImmediatePropagation() { + this.stoppedImmediate = true; +}; diff --git a/src/utils/EventTarget.js b/src/utils/EventTarget.js index 92a5908..9c374b5 100644 --- a/src/utils/EventTarget.js +++ b/src/utils/EventTarget.js @@ -1,4 +1,4 @@ -var Event = require('./Event'); +var EventData = require('./EventData'); /** * Mixins event emitter functionality to an object. @@ -44,7 +44,7 @@ //ensure we are using a real pixi event if (!data || data.__isEventObject !== true) { - data = new Event(this, eventName, data); + data = new EventData(this, eventName, data); } //iterate the listeners @@ -122,8 +122,9 @@ obj.off = obj.removeEventListener = function off(eventName, fn) { this._listeners = this._listeners || {}; - if (!this._listeners[eventName]) + if (!this._listeners[eventName]) { return this; + } var list = this._listeners[eventName], i = fn ? list.length : 0; @@ -149,14 +150,15 @@ obj.removeAllListeners = function removeAllListeners(eventName) { this._listeners = this._listeners || {}; - if (!this._listeners[eventName]) + if (!this._listeners[eventName]) { return this; + } delete this._listeners[eventName]; return this; }; -}; +} module.exports = { /** @@ -167,4 +169,4 @@ mixin: function mixin(obj) { EventTarget(obj); } -} +}; diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..619902d --- /dev/null +++ b/.jshintignore @@ -0,0 +1,2 @@ +./src/extras/spine/Spine.js +./src/utils/PolyK.js diff --git a/.jshintrc b/.jshintrc index a29dc86..7048b43 100644 --- a/.jshintrc +++ b/.jshintrc @@ -26,7 +26,7 @@ "noempty" : true, // Prohibit use of empty blocks. "nonew" : true, // Prohibit use of constructors for side-effects. "plusplus" : false, // Disallow use of `++` & `--`. - "quotmark" : true, // Force consistency when using quote marks. + "quotmark" : "single", // Force consistency when using quote marks. "undef" : true, // Require all non-global variables be declared before they are used. "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. diff --git a/package.json b/package.json index 5132759..20e18d5 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "watchify": "^2.2.1" }, "dependencies": { - "raf": "^2.0.4", - "superagent": "^0.21.0", "webgl-enabled": "^1.0.2" } } diff --git a/src/const.js b/src/const.js new file mode 100644 index 0000000..70a7a55 --- /dev/null +++ b/src/const.js @@ -0,0 +1,132 @@ +/** + * Constant values used in pixi + * + * @mixin const + */ +module.exports = { + /** + * Constant to identify the WEBGL Renderer Type + * + * @static + * @constant + * @property {number} WEBGL_RENDERER + */ + WEBGL_RENDERER: 1, + + /** + * Constant to identify the CANVAS Renderer Type + * + * @static + * @constant + * @property {number} CANVAS_RENDERER + */ + CANVAS_RENDERER: 2, + + /** + * String of the current PIXI version + * + * @static + * @constant + * @property {string} VERSION + */ + VERSION: require('../package.json').version, + + /** + * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports + * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like + * NORMAL. + * + * @static + * @constant + * @property {object} blendModes + * @property {number} blendModes.NORMAL + * @property {number} blendModes.ADD + * @property {number} blendModes.MULTIPLY + * @property {number} blendModes.SCREEN + * @property {number} blendModes.OVERLAY + * @property {number} blendModes.DARKEN + * @property {number} blendModes.LIGHTEN + * @property {number} blendModes.COLOR_DODGE + * @property {number} blendModes.COLOR_BURN + * @property {number} blendModes.HARD_LIGHT + * @property {number} blendModes.SOFT_LIGHT + * @property {number} blendModes.DIFFERENCE + * @property {number} blendModes.EXCLUSION + * @property {number} blendModes.HUE + * @property {number} blendModes.SATURATION + * @property {number} blendModes.COLOR + * @property {number} blendModes.LUMINOSITY + */ + blendModes: { + NORMAL: 0, + ADD: 1, + MULTIPLY: 2, + SCREEN: 3, + OVERLAY: 4, + DARKEN: 5, + LIGHTEN: 6, + COLOR_DODGE: 7, + COLOR_BURN: 8, + HARD_LIGHT: 9, + SOFT_LIGHT: 10, + DIFFERENCE: 11, + EXCLUSION: 12, + HUE: 13, + SATURATION: 14, + COLOR: 15, + LUMINOSITY: 16 + }, + + /** + * The scale modes that are supported by pixi. + * + * The DEFAULT scale mode affects the default scaling mode of future operations. + * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. + * + * @static + * @constant + * @property {object} scaleModes + * @property {number} scaleModes.DEFAULT=LINEAR + * @property {number} scaleModes.LINEAR Smooth scaling + * @property {number} scaleModes.NEAREST Pixelating scaling + */ + scaleModes: { + DEFAULT: 0, + LINEAR: 0, + NEAREST: 1 + }, + + /** + * The prefix that denotes a URL is for a retina asset + * + * @static + * @constant + * @property {string} RETINA_PREFIX + */ + RETINA_PREFIX: '@2x', + + /** + * The default render options if none are supplied to {@link PIXI.WebGLRenderer} + * or {@link PIXI.CanvasRenderer}. + * + * @static + * @constant + * @property {object} defaultRenderOptions + * @property {HTMLCanvasElement} defaultRenderOptions.view=null + * @property {boolean} defaultRenderOptions.transparent=false + * @property {boolean} defaultRenderOptions.antialias=false + * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false + * @property {number} defaultRenderOptions.resolution=1 + * @property {boolean} defaultRenderOptions.clearBeforeRender=true + * @property {boolean} defaultRenderOptions.autoResize=false + */ + defaultRenderOptions: { + view: null, + resolution: 1, + antialias: false, + autoResize: false, + transparent: false, + clearBeforeRender: true, + preserveDrawingBuffer: false + } +}; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index e8f8f3e..86a59d4 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -339,7 +339,7 @@ * @param interactionData {InteractionData} */ this.touchendoutside = null; -}; +} // constructor DisplayObject.prototype.constructor = DisplayObject; @@ -587,7 +587,7 @@ * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -DisplayObject.prototype.getBounds = function (matrix) { +DisplayObject.prototype.getBounds = function (/* matrix */) { return math.Rectangle.EMPTY; }; @@ -749,7 +749,7 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderWebGL = function (renderSession) { +DisplayObject.prototype._renderWebGL = function (/* renderSession */) { // OVERWRITE; }; @@ -759,6 +759,6 @@ * @param renderSession {RenderSession} * @private */ -DisplayObject.prototype._renderCanvas = function (renderSession) { +DisplayObject.prototype._renderCanvas = function (/* renderSession */) { // OVERWRITE; }; diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index c2fedae..b81a089 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -19,7 +19,7 @@ * @readonly */ this.children = []; -}; +} // constructor DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); diff --git a/src/display/MovieClip.js b/src/display/MovieClip.js index 511f87e..e9b8126 100644 --- a/src/display/MovieClip.js +++ b/src/display/MovieClip.js @@ -1,4 +1,5 @@ -var Sprite = require('./Sprite'); +var Sprite = require('./Sprite'), + Texture = require('../textures/Texture'); /** * A MovieClip is a simple way to display an animation depicted by a list of textures. @@ -58,7 +59,7 @@ * @readonly */ this.playing = false; -}; +} // constructor MovieClip.prototype = Object.create(Sprite.prototype); @@ -160,7 +161,7 @@ var textures = []; for (var i = 0; i < frames.length; ++i) { - textures.push(new PIXI.Texture.fromFrame(frames[i])); + textures.push(new Texture.fromFrame(frames[i])); } return new MovieClip(textures); @@ -176,7 +177,7 @@ var textures = []; for (var i = 0; i < images.length; ++i) { - textures.push(new PIXI.Texture.fromImage(images[i])); + textures.push(new Texture.fromImage(images[i])); } return new MovieClip(textures); diff --git a/src/display/Sprite.js b/src/display/Sprite.js index 849e0f3..655de5b 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,6 +1,9 @@ var math = require('../math'), Texture = require('../textures/Texture'), - DisplayObjectContainer = require('./DisplayObjectContainer'); + DisplayObjectContainer = require('./DisplayObjectContainer'), + CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), + utils = require('../utils'), + CONST = require('../const'); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -64,12 +67,12 @@ this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. + * The blend mode to be applied to the sprite. Set to CONST.blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default PIXI.blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = PIXI.blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. @@ -188,8 +191,13 @@ if(b === 0 && c === 0) { // scale may be negative! - if(a < 0)a *= -1; - if(d < 0)d *= -1; + if (a < 0) { + a *= -1; + } + + if (d < 0) { + d *= -1; + } // this means there is no rotation going on right? RIGHT? // if thats the case then we can avoid checking the bound values! yay @@ -323,7 +331,7 @@ if (this.blendMode !== renderSession.currentBlendMode) { renderSession.currentBlendMode = this.blendMode; - renderSession.context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + renderSession.context.globalCompositeOperation = blendModesCanvas[renderSession.currentBlendMode]; } if (this._mask) { @@ -339,7 +347,7 @@ // If smoothingEnabled is supported and we need to change the smoothing property for this texture if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) { renderSession.scaleMode = this.texture.baseTexture.scaleMode; - renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR); + renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === CONST.scaleModes.LINEAR); } // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions @@ -376,7 +384,7 @@ this.cachedTint = this.tint; // TODO clean up caching - how to clean up the caches? - this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint); + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); } renderSession.context.drawImage( @@ -426,7 +434,7 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId */ Sprite.fromFrame = function (frameId) { - var texture = PIXI.TextureCache[frameId]; + var texture = utils.TextureCache[frameId]; if (!texture) { throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this); @@ -444,5 +452,5 @@ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id */ Sprite.fromImage = function (imageId, crossorigin, scaleMode) { - return new Sprite(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode)); + return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode)); }; diff --git a/src/display/SpriteBatch.js b/src/display/SpriteBatch.js index ebf6ca3..59aa55c 100644 --- a/src/display/SpriteBatch.js +++ b/src/display/SpriteBatch.js @@ -1,4 +1,5 @@ -var DisplayObjectContainer = require('./DisplayObjectContainer'); +var DisplayObjectContainer = require('./DisplayObjectContainer'), + WebGLFastSpriteBatch = require('../renderers/webgl/utils/WebGLFastSpriteBatch'); /** * The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, @@ -30,7 +31,7 @@ DisplayObjectContainer.call(this); this.ready = false; -}; +} SpriteBatch.prototype = Object.create(DisplayObjectContainer.prototype); SpriteBatch.prototype.constructor = SpriteBatch; @@ -42,7 +43,7 @@ */ SpriteBatch.prototype.initWebGL = function (gl) { // TODO only one needed for the whole engine really? - this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl); + this.fastSpriteBatch = new WebGLFastSpriteBatch(gl); this.ready = true; }; @@ -109,7 +110,7 @@ continue; } - var frame = texture.frame; + var frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -140,7 +141,7 @@ frame.height * child.scale.y ); } - else { { + else { if (!isRotated) { isRotated = true; } diff --git a/src/display/Stage.js b/src/display/Stage.js index ebee6f9..9036d4c 100644 --- a/src/display/Stage.js +++ b/src/display/Stage.js @@ -67,7 +67,7 @@ this.stage.hitArea = new math.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); -}; +} // constructor Stage.prototype = Object.create(DisplayObjectContainer.prototype); diff --git a/src/extras/Rope.js b/src/extras/Rope.js index 0dfb4ac..66c9800 100644 --- a/src/extras/Rope.js +++ b/src/extras/Rope.js @@ -18,9 +18,8 @@ this.colors = new Float32Array(points.length * 2); this.indices = new Uint16Array(points.length * 2); - this.refresh(); -}; +} // constructor @@ -132,7 +131,9 @@ ratio = (1 - (i / (total-1))) * 10; - if (ratio > 1) ratio = 1; + if (ratio > 1) { + ratio = 1; + } perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; diff --git a/src/extras/Strip.js b/src/extras/Strip.js index 0101d42..f97b0f5 100644 --- a/src/extras/Strip.js +++ b/src/extras/Strip.js @@ -1,4 +1,6 @@ -var DisplayObjectContainer = require('../display/DisplayObjectContainer'); +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + math = require('../math'), + CONST = require('../const'); /** * @@ -22,14 +24,14 @@ // set up the main bits.. this.uvs = new Float32Array([0, 1, - 1, 1, - 1, 0, - 0, 1]); + 1, 1, + 1, 0, + 0, 1]); this.vertices = new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new Float32Array([1, 1, 1, 1]); @@ -46,9 +48,9 @@ * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other. @@ -58,8 +60,7 @@ this.canvasPadding = 0; this.drawMode = Strip.DrawModes.TRIANGLE_STRIP; - -}; +} // constructor Strip.prototype = Object.create(DisplayObjectContainer.prototype); @@ -68,13 +69,18 @@ Strip.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if (!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } + // render triangle strip.. renderSession.spriteBatch.stop(); // init! init! - if (!this._vertexBuffer)this._initWebGL(renderSession); + if (!this._vertexBuffer) { + this._initWebGL(renderSession); + } renderSession.shaderManager.setShader(renderSession.shaderManager.stripShader); @@ -405,7 +411,7 @@ } if (minX === -Infinity || maxY === Infinity) { - return EmptyRectangle; + return math.Rectangle.EMPTY; } var bounds = this._bounds; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index d8fba7c..e531464 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -1,5 +1,9 @@ var Sprite = require('../display/Sprite'), - utils = require('../utils'); + Texture = require('../textures/Texture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + utils = require('../utils'), + CONST = require('../const'); /** * A tiling sprite is a fast way of rendering a tiling image @@ -33,21 +37,21 @@ * * @member {Point} */ - this.tileScale = new Point(1,1); + this.tileScale = new math.Point(1,1); /** * A point that represents the scale of the texture object * * @member {Point} */ - this.tileScaleOffset = new Point(1,1); + this.tileScaleOffset = new math.Point(1,1); /** * The offset position of the image that is being tiled * * @member {Point} */ - this.tilePosition = new Point(0,0); + this.tilePosition = new math.Point(0,0); /** * Whether this sprite is renderable or not @@ -71,7 +75,7 @@ * @member {number} * @default blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; } TilingSprite.prototype = Object.create(Sprite.prototype); @@ -169,8 +173,13 @@ renderSession.spriteBatch.stop(); - if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); + if (this._filters) { + renderSession.filterManager.popFilter(); + } + + if (this._mask) { + renderSession.maskManager.popMask(this._mask, renderSession); + } renderSession.spriteBatch.start(); }; @@ -345,11 +354,12 @@ /** * - * * @param forcePowerOfTwo {boolean} Whether we want to force the texture to be a power of two */ TilingSprite.prototype.generateTilingTexture = function (forcePowerOfTwo) { - if (!this.texture.baseTexture.hasLoaded) return; + if (!this.texture.baseTexture.hasLoaded) { + return; + } var texture = this.originalTexture || this.texture; var frame = texture.frame; @@ -373,7 +383,9 @@ targetHeight = utils.getNextPowerOfTwo(frame.height); // If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas - if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true; + if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) { + newTextureRequired = true; + } } if (newTextureRequired) { diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js index 9da29ef..d543b04 100644 --- a/src/extras/spine/PIXISpine.js +++ b/src/extras/spine/PIXISpine.js @@ -1,9 +1,13 @@ -var utils = require('../../utils'); +var math = require('../../math'), + utils = require('../../utils'), + Sprite = require('../../display/Sprite'), + Texture = require('../../textures/Texture'), + Strip = require('../Strip'), + DisplayObjectContainer = require('../../display/DisplayObjectContainer'); /* Esoteric Software SPINE wrapper for pixi.js */ spine.Bone.yDown = true; -AnimCache = {}; /** * A class that enables the you to import and run your spine animations in pixi. @@ -18,7 +22,7 @@ function Spine(url) { DisplayObjectContainer.call(this); - this.spineData = AnimCache[url]; + this.spineData = utils.AnimCache[url]; if (!this.spineData) { throw new Error('Spine data must be preloaded using SpineLoader or AssetLoader: ' + url); @@ -59,7 +63,7 @@ } this.autoUpdate = true; -}; +} Spine.prototype = Object.create(DisplayObjectContainer.prototype); Spine.prototype.constructor = Spine; @@ -77,7 +81,7 @@ * @memberof Spine# * @default true */ - Object.defineProperty(Spine.prototype, 'autoUpdate', { + autoUpdate: { get: function () { return (this.updateTransform === Spine.prototype.autoUpdateTransform); }, @@ -200,7 +204,7 @@ Spine.prototype.createSprite = function (slot, attachment) { var descriptor = attachment.rendererObject; var baseTexture = descriptor.page.rendererObject; - var spriteRect = new Rectangle(descriptor.x, + var spriteRect = new math.Rectangle(descriptor.x, descriptor.y, descriptor.rotate ? descriptor.height : descriptor.width, descriptor.rotate ? descriptor.width : descriptor.height); diff --git a/src/extras/spine/SpineTextureLoader.js b/src/extras/spine/SpineTextureLoader.js index 98d6174..be54bc0 100644 --- a/src/extras/spine/SpineTextureLoader.js +++ b/src/extras/spine/SpineTextureLoader.js @@ -1,3 +1,6 @@ +var EventTarget = require('../../utils/EventTarget'), + BaseTexture = require('../../textures/BaseTexture'); + /** * Supporting class to load images from spine atlases as per spine spec. * @@ -13,7 +16,7 @@ this.basePath = basePath; this.crossorigin = crossorigin; this.loadingCount = 0; -}; +} SpineTextureLoader.prototype.constructor = SpineTextureLoader; module.exports = SpineTextureLoader; @@ -46,4 +49,4 @@ */ SpineTextureLoader.prototype.unload = function (texture) { texture.destroy(true); -}; \ No newline at end of file +}; diff --git a/src/filters/AbstractFilter.js b/src/filters/AbstractFilter.js index 6a1e5af..2102de9 100644 --- a/src/filters/AbstractFilter.js +++ b/src/filters/AbstractFilter.js @@ -39,7 +39,7 @@ * @private */ this.fragmentSrc = typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []); -}; +} AbstractFilter.prototype.constructor = AbstractFilter; module.exports = AbstractFilter; diff --git a/src/filters/AlphaMaskFilter.js b/src/filters/AlphaMaskFilter.js index 72d29fa..9c1c687 100644 --- a/src/filters/AlphaMaskFilter.js +++ b/src/filters/AlphaMaskFilter.js @@ -59,7 +59,7 @@ //' gl_FragColor = gl_FragColor;', '}' ]; -}; +} AlphaMaskFilter.prototype = Object.create(AbstractFilter.prototype); AlphaMaskFilter.prototype.constructor = AlphaMaskFilter; diff --git a/src/filters/AsciiFilter.js b/src/filters/AsciiFilter.js index 0cb96ef..a543cb2 100644 --- a/src/filters/AsciiFilter.js +++ b/src/filters/AsciiFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor = vec4(col, 1.0);', '}' ]; -}; +} AsciiFilter.prototype = Object.create(AbstractFilter.prototype); AsciiFilter.prototype.constructor = AsciiFilter; diff --git a/src/filters/BlurFilter.js b/src/filters/BlurFilter.js index 4eb9fef..49a941e 100644 --- a/src/filters/BlurFilter.js +++ b/src/filters/BlurFilter.js @@ -17,7 +17,7 @@ this.blurYFilter = new BlurYFilter(); this.passes = [this.blurXFilter, this.blurYFilter]; -}; +} BlurFilter.prototype = Object.create(AbstractFilter.prototype); BlurFilter.prototype.constructor = BlurFilter; diff --git a/src/filters/BlurXFilter.js b/src/filters/BlurXFilter.js index 17c293b..d492e97 100644 --- a/src/filters/BlurXFilter.js +++ b/src/filters/BlurXFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurXFilter.prototype = Object.create(AbstractFilter.prototype); BlurXFilter.prototype.constructor = BlurXFilter; diff --git a/src/filters/BlurYFilter.js b/src/filters/BlurYFilter.js index 8c8eeaa..8ddee08 100644 --- a/src/filters/BlurYFilter.js +++ b/src/filters/BlurYFilter.js @@ -41,7 +41,7 @@ ' gl_FragColor = sum;', '}' ]; -}; +} BlurYFilter.prototype = Object.create(AbstractFilter.prototype); BlurYFilter.prototype.constructor = BlurYFilter; diff --git a/src/filters/ColorMatrixFilter.js b/src/filters/ColorMatrixFilter.js index 7296a26..2dc33ba 100644 --- a/src/filters/ColorMatrixFilter.js +++ b/src/filters/ColorMatrixFilter.js @@ -34,7 +34,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', '}' ]; -}; +} ColorMatrixFilter.prototype = Object.create(AbstractFilter.prototype); ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; diff --git a/src/filters/ColorStepFilter.js b/src/filters/ColorStepFilter.js index a0b736c..9f38293 100644 --- a/src/filters/ColorStepFilter.js +++ b/src/filters/ColorStepFilter.js @@ -28,7 +28,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} ColorStepFilter.prototype = Object.create(AbstractFilter.prototype); ColorStepFilter.prototype.constructor = ColorStepFilter; diff --git a/src/filters/ConvolutionFilter.js b/src/filters/ConvolutionFilter.js index b31a1bc..2fc3e11 100644 --- a/src/filters/ConvolutionFilter.js +++ b/src/filters/ConvolutionFilter.js @@ -56,8 +56,7 @@ ' gl_FragColor.a = c22.a;', '}' ]; - -}; +} ConvolutionFilter.prototype = Object.create(AbstractFilter.prototype); ConvolutionFilter.prototype.constructor = ConvolutionFilter; diff --git a/src/filters/CrossHatchFilter.js b/src/filters/CrossHatchFilter.js index 42a8561..0a680e5 100644 --- a/src/filters/CrossHatchFilter.js +++ b/src/filters/CrossHatchFilter.js @@ -54,7 +54,7 @@ ' }', '}' ]; -}; +} CrossHatchFilter.prototype = Object.create(AbstractFilter.prototype); CrossHatchFilter.prototype.constructor = CrossHatchFilter; diff --git a/src/filters/DisplacementFilter.js b/src/filters/DisplacementFilter.js index 9d5d426..3df156f 100644 --- a/src/filters/DisplacementFilter.js +++ b/src/filters/DisplacementFilter.js @@ -64,7 +64,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', '}' ]; -}; +} DisplacementFilter.prototype = Object.create(AbstractFilter.prototype); DisplacementFilter.prototype.constructor = DisplacementFilter; diff --git a/src/filters/DotScreenFilter.js b/src/filters/DotScreenFilter.js index f92226a..9550ae5 100644 --- a/src/filters/DotScreenFilter.js +++ b/src/filters/DotScreenFilter.js @@ -51,7 +51,7 @@ ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', '}' ]; -}; +} DotScreenFilter.prototype = Object.create(AbstractFilter.prototype); DotScreenFilter.prototype.constructor = DotScreenFilter; diff --git a/src/filters/FilterBlock.js b/src/filters/FilterBlock.js index d78c70d..4253d8a 100644 --- a/src/filters/FilterBlock.js +++ b/src/filters/FilterBlock.js @@ -18,7 +18,7 @@ * @member {boolean} */ this.renderable = true; -}; +} FilterBlock.prototype.constructor = FilterBlock; module.exports = FilterBlock; diff --git a/src/filters/GrayFilter.js b/src/filters/GrayFilter.js index 8b5d8ef..c253ca7 100644 --- a/src/filters/GrayFilter.js +++ b/src/filters/GrayFilter.js @@ -30,7 +30,7 @@ // ' gl_FragColor = gl_FragColor;', '}' ]; -}; +} GrayFilter.prototype = Object.create(AbstractFilter.prototype); GrayFilter.prototype.constructor = GrayFilter; diff --git a/src/filters/InvertFilter.js b/src/filters/InvertFilter.js index 6538c38..622a0e9 100644 --- a/src/filters/InvertFilter.js +++ b/src/filters/InvertFilter.js @@ -31,7 +31,7 @@ // ' gl_FragColor = gl_FragColor * vColor;', '}' ]; -}; +} InvertFilter.prototype = Object.create(AbstractFilter.prototype); InvertFilter.prototype.constructor = InvertFilter; diff --git a/src/filters/NoiseFilter.js b/src/filters/NoiseFilter.js index 1936127..1f806f9 100644 --- a/src/filters/NoiseFilter.js +++ b/src/filters/NoiseFilter.js @@ -44,7 +44,7 @@ ' gl_FragColor = color;', '}' ]; -}; +} NoiseFilter.prototype = Object.create(AbstractFilter.prototype); NoiseFilter.prototype.constructor = NoiseFilter; diff --git a/src/filters/NormalMapFilter.js b/src/filters/NormalMapFilter.js index 07305f2..f40b3de 100644 --- a/src/filters/NormalMapFilter.js +++ b/src/filters/NormalMapFilter.js @@ -121,7 +121,6 @@ ' gl_FragColor = vec4(result, 1.0);',*/ '}' ]; - } NormalMapFilter.prototype = Object.create(AbstractFilter.prototype); @@ -136,7 +135,7 @@ 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); }; Object.defineProperties(NormalMapFilter.prototype, { diff --git a/src/filters/PixelateFilter.js b/src/filters/PixelateFilter.js index 77d4dfe..ab504a9 100644 --- a/src/filters/PixelateFilter.js +++ b/src/filters/PixelateFilter.js @@ -37,7 +37,7 @@ ' gl_FragColor = texture2D(uSampler, color);', '}' ]; -}; +} PixelateFilter.prototype = Object.create(AbstractFilter.prototype); PixelateFilter.prototype.constructor = PixelateFilter; diff --git a/src/filters/RGBSplitFilter.js b/src/filters/RGBSplitFilter.js index cc4f1d9..4e94ec6 100644 --- a/src/filters/RGBSplitFilter.js +++ b/src/filters/RGBSplitFilter.js @@ -39,7 +39,7 @@ ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', '}' ]; -}; +} RGBSplitFilter.prototype = Object.create(AbstractFilter.prototype); RGBSplitFilter.prototype.constructor = RGBSplitFilter; diff --git a/src/filters/SepiaFilter.js b/src/filters/SepiaFilter.js index c65b879..b74ccac 100644 --- a/src/filters/SepiaFilter.js +++ b/src/filters/SepiaFilter.js @@ -31,7 +31,7 @@ ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', '}' ]; -}; +} SepiaFilter.prototype = Object.create(AbstractFilter.prototype); SepiaFilter.prototype.constructor = SepiaFilter; diff --git a/src/filters/SmartBlurFilter.js b/src/filters/SmartBlurFilter.js index b5c3e38..c90c358 100644 --- a/src/filters/SmartBlurFilter.js +++ b/src/filters/SmartBlurFilter.js @@ -42,7 +42,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} SmartBlurFilter.prototype = Object.create(AbstractFilter.prototype); SmartBlurFilter.prototype.constructor = SmartBlurFilter; diff --git a/src/filters/TiltShiftFilter.js b/src/filters/TiltShiftFilter.js index fb217ba..c5d4fb7 100644 --- a/src/filters/TiltShiftFilter.js +++ b/src/filters/TiltShiftFilter.js @@ -14,7 +14,7 @@ * @extends AbstractFilter * @namespace PIXI */ -TiltShiftFilter = function () { +function TiltShiftFilter() { AbstractFilter.call(this); this.tiltShiftXFilter = new TiltShiftXFilter(); @@ -24,7 +24,7 @@ this.tiltShiftXFilter.updateDelta(); this.passes = [this.tiltShiftXFilter, this.tiltShiftYFilter]; -}; +} TiltShiftFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftFilter.prototype.constructor = TiltShiftFilter; diff --git a/src/filters/TiltShiftXFilter.js b/src/filters/TiltShiftXFilter.js index 4f4f512..f07ba13 100644 --- a/src/filters/TiltShiftXFilter.js +++ b/src/filters/TiltShiftXFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftXFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; diff --git a/src/filters/TiltShiftYFilter.js b/src/filters/TiltShiftYFilter.js index 958e562..2127ef2 100644 --- a/src/filters/TiltShiftYFilter.js +++ b/src/filters/TiltShiftYFilter.js @@ -65,7 +65,7 @@ ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', '}' ]; -}; +} TiltShiftYFilter.prototype = Object.create(AbstractFilter.prototype); TiltShiftYFilter.prototype.constructor = TiltShiftYFilter; diff --git a/src/filters/TwistFilter.js b/src/filters/TwistFilter.js index 6fa3c9a..b49dfbf 100644 --- a/src/filters/TwistFilter.js +++ b/src/filters/TwistFilter.js @@ -43,7 +43,7 @@ ' gl_FragColor = texture2D(uSampler, coord+offset);', '}' ]; -}; +} TwistFilter.prototype = Object.create(AbstractFilter.prototype); TwistFilter.prototype.constructor = TwistFilter; diff --git a/src/index.js b/src/index.js index 2238a0e..d626694 100644 --- a/src/index.js +++ b/src/index.js @@ -1,199 +1,47 @@ /** * @file Main export of the PIXI library - * @namespace PIXI * @author Mat Groves * @copyright 2013-2015 GoodBoyDigital * @license {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License} */ + +var WebGLRenderer = require('./renderers/webgl/WebGLRenderer'), + CanvasRenderer = require('./renderers/canvas/CanvasRenderer'); + +/** + * @namespace PIXI + */ var PIXI = { math: require('./math'), + CONST: require('./const'), /** - * Constant to identify the WEBGL Renderer Type + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer * - * @property {number} WEBGL_RENDERER - * @constant - * @static + * @param width=800 {number} the width of the renderers view + * @param height=600 {number} the height of the renderers view + * @param [options] {object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {boolean} If the render view is transparent, default false + * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 + * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - WEBGL_RENDERER: 1, + autoDetectRenderer: function (width, height, options) { + width = width || 800; + height = height || 600; - /** - * Constant to identify the CANVAS Renderer Type - * - * @property {number} CANVAS_RENDERER - * @constant - * @static - */ - CANVAS_RENDERER: 2, - - /** - * String of the current PIXI version - * - * @property {string} VERSION - * @constant - * @static - */ - VERSION: require('../package.json').version, - - /** - * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports - * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like - * NORMAL. - * - * @property {object} blendModes - * @property {number} blendModes.NORMAL - * @property {number} blendModes.ADD - * @property {number} blendModes.MULTIPLY - * @property {number} blendModes.SCREEN - * @property {number} blendModes.OVERLAY - * @property {number} blendModes.DARKEN - * @property {number} blendModes.LIGHTEN - * @property {number} blendModes.COLOR_DODGE - * @property {number} blendModes.COLOR_BURN - * @property {number} blendModes.HARD_LIGHT - * @property {number} blendModes.SOFT_LIGHT - * @property {number} blendModes.DIFFERENCE - * @property {number} blendModes.EXCLUSION - * @property {number} blendModes.HUE - * @property {number} blendModes.SATURATION - * @property {number} blendModes.COLOR - * @property {number} blendModes.LUMINOSITY - * @constant - * @static - */ - blendModes: { - NORMAL: 0, - ADD: 1, - MULTIPLY: 2, - SCREEN: 3, - OVERLAY: 4, - DARKEN: 5, - LIGHTEN: 6, - COLOR_DODGE: 7, - COLOR_BURN: 8, - HARD_LIGHT: 9, - SOFT_LIGHT: 10, - DIFFERENCE: 11, - EXCLUSION: 12, - HUE: 13, - SATURATION: 14, - COLOR: 15, - LUMINOSITY: 16 - }, - - /** - * The scale modes that are supported by pixi. - * - * The DEFAULT scale mode affects the default scaling mode of future operations. - * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability. - * - * @property {object} scaleModes - * @property {number} scaleModes.DEFAULT=LINEAR - * @property {number} scaleModes.LINEAR Smooth scaling - * @property {number} scaleModes.NEAREST Pixelating scaling - * @constant - * @static - */ - scaleModes: { - DEFAULT: 0, - LINEAR: 0, - NEAREST: 1 - }, - - /** - * The prefix that denotes a URL is for a retina asset - * - * @property {string} RETINA_PREFIX - * @constant - * @static - */ - RETINA_PREFIX: '@2x', - - /** - * The default render options if none are supplied to {@link PIXI.WebGLRenderer} - * or {@link PIXI.CanvasRenderer}. - * - * @property {object} defaultRenderOptions - * @property {HTMLCanvasElement} defaultRenderOptions.view=null - * @property {boolean} defaultRenderOptions.transparent=false - * @property {boolean} defaultRenderOptions.antialias=false - * @property {boolean} defaultRenderOptions.preserveDrawingBuffer=false - * @property {number} defaultRenderOptions.resolution=1 - * @property {boolean} defaultRenderOptions.clearBeforeRender=true - * @property {boolean} defaultRenderOptions.autoResize=false - * @constant - * @static - */ - defaultRenderOptions: { - view: null, - resolution: 1, - antialias: false, - autoResize: false, - transparent: false, - clearBeforeRender: true, - preserveDrawingBuffer: false - }, - - /** - * Logs out the version and renderer information for this running instance of PIXI. - * If you don't want to see this message you can set PIXI.sayHello = false; - * - * @param {string} type - The string renderer type to log. - * @constant - * @static - */ - sayHello: function (type) { - if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - '%c %c %c Pixi.js ' + PIXI.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', - 'background: #ff66a5', - 'background: #ff66a5', - 'color: #ff66a5; background: #030307;', - 'background: #ff66a5', - 'background: #ffc3dc', - 'background: #ff66a5', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff', - 'color: #ff2424; background: #fff' - ]; - - console.log.apply(console, args); - } - else if (window['console']) { - console.log('Pixi.js ' + PIXI.VERSION + ' - http://www.pixijs.com/'); + if (require('webgl-enabled')()) { + return new WebGLRenderer(width, height, options); } - PIXI.sayHello = false; + return new CanvasRenderer(width, height, options); } }; +// export pixi module.exports = PIXI; - -/************* - * TODO: - *************/ -// used to create uids for various pixi objects.. -PIXI._UID = 0; - -if(typeof(Float32Array) != 'undefined') -{ - PIXI.Float32Array = Float32Array; - PIXI.Uint16Array = Uint16Array; - - // Uint32Array and ArrayBuffer only used by WebGL renderer - // We can suppose that if WebGL is supported then typed arrays are supported too - // as they predate WebGL support for all browsers: - // see typed arrays support: http://caniuse.com/#search=TypedArrays - // see WebGL support: http://caniuse.com/#search=WebGL - PIXI.Uint32Array = Uint32Array; - PIXI.ArrayBuffer = ArrayBuffer; -} -else -{ - PIXI.Float32Array = Array; - PIXI.Uint16Array = Array; -} - -// interaction frequency -PIXI.INTERACTION_FREQUENCY = 30; -PIXI.AUTO_PREVENT_DEFAULT = true; diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 3e9c2d5..ebf3068 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -1,3 +1,5 @@ +var math = require('../math'); + /** * Holds all information related to an Interaction event * @@ -10,7 +12,7 @@ * * @member {Point} */ - this.global = new Point(); + this.global = new math.Point(); /** * The target Sprite that was interacted with @@ -46,7 +48,7 @@ a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); - point = point || new Point(); + point = point || new math.Point(); point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index f938be2..086e4cf 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -1,3 +1,12 @@ +var InteractionData = require('./InteractionData'), + Sprite = require('../display/Sprite'), + Graphics = require('../primitives/Graphics'), + math = require('../math'); + +// TODO: Obviously rewrite this... +var INTERACTION_FREQUENCY = 30; +var AUTO_PREVENT_DEFAULT = true; + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true @@ -33,7 +42,7 @@ * @member {Point} * @private */ - this.tempPoint = new Point(); + this.tempPoint = new math.Point(); /** * @member {boolean} @@ -122,7 +131,7 @@ this.resolution = 1; // used for hit testing - this._tempPoint = new Point(); + this._tempPoint = new math.Point(); } InteractionManager.prototype.constructor = InteractionManager; @@ -174,7 +183,9 @@ this.resolution = target.resolution; // Check if the dom element has been set. If it has don't do anything. - if (this.interactionDOMElement !== null) return; + if (this.interactionDOMElement !== null) { + return; + } this.setTargetDomElement (target.view); }; @@ -214,7 +225,9 @@ * @private */ InteractionManager.prototype.removeEvents = function () { - if (!this.interactionDOMElement) return; + if (!this.interactionDOMElement) { + return; + } this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -239,13 +252,18 @@ * @private */ InteractionManager.prototype.update = function () { - if (!this.target) return; + if (!this.target) { + return; + } // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * INTERACTION_FREQUENCY ) / 1000; - if (diff < 1) return; + if (diff < 1) { + return; + } + this.last = now; var i = 0; @@ -276,7 +294,9 @@ // ok so deal with interactions.. // looks like there was a hit! if (item.__hit && !over) { - if (item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) { + cursor = item.defaultCursor; + } if (!item.interactiveChildren) { over = true; @@ -406,7 +426,9 @@ item[isDown] = true; // just the one! - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } @@ -494,7 +516,9 @@ } else { if (item[isDown]) { - if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + if (item[upOutsideFunction]) { + item[upOutsideFunction](this.mouse); + } } } @@ -550,7 +574,10 @@ var graphicsData = item.graphicsData; for (i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; - if (!data.fill)continue; + + if (!data.fill) { + continue; + } // only deal with fills.. if (data.shape) { @@ -662,12 +689,17 @@ if (item.__hit) { //call the function! - if (item.touchstart)item.touchstart(touchData); + if (item.touchstart) { + item.touchstart(touchData); + } + item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if (!item.interactiveChildren) break; + if (!item.interactiveChildren) { + break; + } } } } diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 92a256b..adf2183 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,3 +1,10 @@ +var ImageLoader = require('./ImageLoader'), + JsonLoader = require('./JsonLoader'), + AtlasLoader = require('./AtlasLoader'), + SpineLoader = require('./SpineLoader'), + BitmapFontLoader = require('./BitmapFontLoader'), + EventTarget = require('../utils/EventTarget'); + /** * 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 @@ -46,7 +53,7 @@ 'xml': BitmapFontLoader, 'fnt': BitmapFontLoader }; -}; +} // constructor AssetLoader.prototype.constructor = AssetLoader; @@ -117,12 +124,14 @@ var fileType = this._getDataType(fileName); //if not, assume it's a file URI - if (!fileType) + if (!fileType) { fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); + } var Constructor = this.loadersByType[fileType]; - if (!Constructor) + if (!Constructor) { throw new Error(fileType + ' is an unsupported file type'); + } var loader = new Constructor(fileName, this.crossorigin); diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 58f92a6..c3a7549 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + Texture = require('../textures/Texture'), + utils = require('../utils'); + /** * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. * @@ -17,10 +22,8 @@ this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; this.loaded = false; +} -}; - -// constructor AtlasLoader.prototype.constructor = AtlasLoader; module.exports = AtlasLoader; @@ -31,7 +34,7 @@ * */ AtlasLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -132,17 +135,17 @@ for (i in frameData) { var rect = frameData[i].frame; if (rect) { - TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { + utils.TextureCache[i] = new Texture(this.images[j].texture.baseTexture, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }); if (frameData[i].trimmed) { - TextureCache[i].realSize = frameData[i].realSize; + utils.TextureCache[i].realSize = frameData[i].realSize; // trim in pixi not supported yet, todo update trim properties if it is done ... - TextureCache[i].trim.x = 0; - TextureCache[i].trim.y = 0; + utils.TextureCache[i].trim.x = 0; + utils.TextureCache[i].trim.y = 0; } } } diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index abaf1b9..1a68917 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + BitmapText = require('../text/BitmapText'), + ImageLoader = require('./ImageLoader'), + math = require('../math'), + utils = require('../utils'); + /** * 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/ @@ -39,7 +46,7 @@ * @member {Texture} */ this.texture = null; -}; +} // constructor BitmapFontLoader.prototype.constructor = BitmapFontLoader; @@ -52,7 +59,7 @@ * */ BitmapFontLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new utils.AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); @@ -102,7 +109,7 @@ for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new Rectangle( + var textureRect = new math.Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -114,7 +121,7 @@ yOffset: parseInt(letters[i].getAttribute('yoffset'), 10), xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10), kerning: {}, - texture: TextureCache[charCode] = new Texture(this.texture, textureRect) + texture: utils.TextureCache[charCode] = new Texture(this.texture, textureRect) }; } diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 9b922e8..f4890c0 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,3 +1,8 @@ +var EventTarget = require('../utils/EventTarget'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * 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 Texture.fromFrame() and Sprite.fromFrame() @@ -25,7 +30,7 @@ * @readOnly */ this.frames = []; -}; +} // constructor ImageLoader.prototype.constructor = ImageLoader; @@ -73,7 +78,7 @@ for (var x = 0; x < cols; ++x, ++i) { var texture = new Texture( this.texture.baseTexture, - new Rectangle( + new math.Rectangle( x * frameWidth, y * frameHeight, frameWidth, @@ -84,7 +89,7 @@ this.frames.push(texture); if (textureName) { - TextureCache[textureName + '-' + i] = texture; + utils.TextureCache[textureName + '-' + i] = texture; } } } diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js index b8a58a5..80ff7ea 100644 --- a/src/loaders/JsonLoader.js +++ b/src/loaders/JsonLoader.js @@ -1,3 +1,10 @@ +var EventTarget = require('../utils/EventTarget'), + ImageLoader = require('./ImageLoader'), + SpineTextureLoader = require('../extras/spine/SpineTextureLoader'), + Texture = require('../textures/Texture'), + math = require('../math'), + utils = require('../utils'); + /** * The json file loader is used to load in JSON data and parse it * When loaded this class will dispatch a 'loaded' event @@ -38,9 +45,8 @@ * @member {boolean} * @readOnly */ - this.loaded = false; - -}; + this.loaded = false; +} // constructor JsonLoader.prototype.constructor = JsonLoader; @@ -121,7 +127,7 @@ var rect = frameData[i].frame; if (rect) { - var textureSize = new Rectangle(rect.x, rect.y, rect.w, rect.h); + var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h); var crop = textureSize.clone(); var trim = null; @@ -129,9 +135,9 @@ if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - trim = new Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } - TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); + utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim); } } @@ -140,7 +146,7 @@ } else if (this.json.bones) { // check if the json was loaded before - if (AnimCache[this.url]) { + if (utils.AnimCache[this.url]) { this.onLoaded(); } else { @@ -169,7 +175,7 @@ // spine animation var spineJsonParser = new spine.SkeletonJson(attachmentLoader); var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - AnimCache[originalLoader.url] = skeletonData; + utils.AnimCache[originalLoader.url] = skeletonData; originalLoader.spine = skeletonData; originalLoader.spineAtlas = spineAtlas; originalLoader.spineAtlasLoader = atlasLoader; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index 82a4358..a03c728 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 @@ -45,7 +46,7 @@ * @readOnly */ this.loaded = false; -}; +} SpineLoader.prototype.constructor = SpineLoader; module.exports = SpineLoader; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 5c0b5a4..f3ccd1b 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,4 +1,5 @@ -var JsonLoader = require('./JsonLoader'); +var EventTarget = require('../utils/EventTarget'), + JsonLoader = require('./JsonLoader'); /** * The sprite sheet loader is used to load in JSON sprite sheet data @@ -52,7 +53,7 @@ * @member {object} */ this.frames = {}; -}; +} // constructor SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; diff --git a/src/math/Matrix.js b/src/math/Matrix.js index d717b58..c2f87e2 100644 --- a/src/math/Matrix.js +++ b/src/math/Matrix.js @@ -46,7 +46,7 @@ * @default 0 */ this.ty = 0; -}; +} Matrix.prototype.constructor = Matrix; module.exports = Matrix; @@ -243,4 +243,4 @@ return this; }; -identityMatrix = new Matrix(); +Matrix.IDENTITY = new Matrix(); diff --git a/src/math/Point.js b/src/math/Point.js index 420e5bc..7565b2d 100644 --- a/src/math/Point.js +++ b/src/math/Point.js @@ -19,7 +19,7 @@ * @default 0 */ this.y = y || 0; -}; +} Point.prototype.constructor = Point; module.exports = Point; diff --git a/src/math/shapes/Circle.js b/src/math/shapes/Circle.js index 208b30f..3f6a3b6 100644 --- a/src/math/shapes/Circle.js +++ b/src/math/shapes/Circle.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Circle object can be used to specify a hit area for displayObjects * @@ -31,7 +33,7 @@ * * @member {number} */ -}; +} Circle.prototype.constructor = Circle; module.exports = Circle; @@ -55,8 +57,9 @@ * @return {boolean} Whether the x/y coordinates are within this Circle */ Circle.prototype.contains = function (x, y) { - if (this.radius <= 0) + if (this.radius <= 0) { return false; + } var dx = (this.x - x), dy = (this.y - y), diff --git a/src/math/shapes/Ellipse.js b/src/math/shapes/Ellipse.js index 20d2539..fc9df4d 100644 --- a/src/math/shapes/Ellipse.js +++ b/src/math/shapes/Ellipse.js @@ -1,3 +1,5 @@ +var Rectangle = require('./Rectangle'); + /** * The Ellipse object can be used to specify a hit area for displayObjects * @@ -38,7 +40,7 @@ * * @member {number} */ -}; +} Ellipse.prototype.constructor = Ellipse; module.exports = Ellipse; @@ -62,8 +64,9 @@ * @return {boolean} Whether the x/y coords are within this ellipse */ Ellipse.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } //normalize the coords to an ellipse with center 0,0 var normx = ((x - this.x) / this.width), diff --git a/src/math/shapes/Polygon.js b/src/math/shapes/Polygon.js index b2c3483..5d4a464 100644 --- a/src/math/shapes/Polygon.js +++ b/src/math/shapes/Polygon.js @@ -33,7 +33,7 @@ * @member {Point[]} */ this.points = points; -}; +} Polygon.prototype.constructor = Polygon; module.exports = Polygon; diff --git a/src/math/shapes/Rectangle.js b/src/math/shapes/Rectangle.js index 9c52db4..c3454b5 100644 --- a/src/math/shapes/Rectangle.js +++ b/src/math/shapes/Rectangle.js @@ -38,7 +38,7 @@ * * @member {number} */ -}; +} Rectangle.prototype.constructor = Rectangle; module.exports = Rectangle; diff --git a/src/math/shapes/RoundedRectangle.js b/src/math/shapes/RoundedRectangle.js index b592389..0f2abfc 100644 --- a/src/math/shapes/RoundedRectangle.js +++ b/src/math/shapes/RoundedRectangle.js @@ -45,7 +45,7 @@ * * @member {number} */ -}; +} RoundedRectangle.prototype.constructor = RoundedRectangle; module.exports = RoundedRectangle; @@ -67,8 +67,9 @@ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle */ RoundedRectangle.prototype.contains = function (x, y) { - if (this.width <= 0 || this.height <= 0) + if (this.width <= 0 || this.height <= 0) { return false; + } if (x >= this.x && x <= this.x + this.width) { if (y >= this.y && y <= this.y + this.height) { diff --git a/src/primitives/Graphics.js b/src/primitives/Graphics.js index e738d01..d0b1dd7 100644 --- a/src/primitives/Graphics.js +++ b/src/primitives/Graphics.js @@ -1,8 +1,11 @@ var GraphicsData = require('./GraphicsData'), Sprite = require('../display/Sprite'), + Texture = require('../textures/Texture'), DisplayObjectContainer = require('../display/DisplayObjectContainer'), + WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'), CanvasGraphics = require('../renderers/canvas/CanvasGraphics'), CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + CONST = require('../const'), math = require('../math'); /** @@ -62,9 +65,9 @@ * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode. * * @member {number} - * @default blendModes.NORMAL; + * @default CONST.blendModes.NORMAL; */ - this.blendMode = blendModes.NORMAL; + this.blendMode = CONST.blendModes.NORMAL; /** * Current path @@ -102,7 +105,7 @@ * @member {REctangle} * @private */ - this._localBounds = new Rectangle(0,0,1,1); + this._localBounds = new math.Rectangle(0,0,1,1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics @@ -129,8 +132,7 @@ * @private */ this.cachedSpriteDirty = false; - -}; +} // constructor Graphics.prototype = Object.create(DisplayObjectContainer.prototype); @@ -184,7 +186,7 @@ if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - this.drawShape( new Polygon( this.currentPath.shape.points.slice(-2) )); + this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) )); } else { // otherwise its empty so lets just set the line properties @@ -205,7 +207,7 @@ * @return {Graphics} */ Graphics.prototype.moveTo = function (x, y) { - this.drawShape(new Polygon([x,y])); + this.drawShape(new math.Polygon([x,y])); return this; }; @@ -507,7 +509,7 @@ * @return {Graphics} */ Graphics.prototype.drawRect = function ( x, y, width, height ) { - this.drawShape(new Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x,y, width, height)); return this; }; @@ -521,7 +523,7 @@ * @param radius {number} Radius of the rectangle corners */ Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius ) { - this.drawShape(new RoundedRectangle(x, y, width, height, radius)); + this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -535,7 +537,7 @@ * @return {Graphics} */ Graphics.prototype.drawCircle = function (x, y, radius) { - this.drawShape(new Circle(x,y, radius)); + this.drawShape(new math.Circle(x,y, radius)); return this; }; @@ -550,7 +552,7 @@ * @return {Graphics} */ Graphics.prototype.drawEllipse = function (x, y, width, height) { - this.drawShape(new Ellipse(x, y, width, height)); + this.drawShape(new math.Ellipse(x, y, width, height)); return this; }; @@ -566,7 +568,7 @@ path = Array.prototype.slice.call(arguments); } - this.drawShape(new Polygon(path)); + this.drawShape(new math.Polygon(path)); return this; }; @@ -1012,7 +1014,9 @@ Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! - if (this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + if (this.currentPath.shape.points.length <= 2) { + this.graphicsData.pop(); + } } this.currentPath = null; @@ -1062,9 +1066,9 @@ Graphics.RREC = 4; // REFACTOR: Move these to their classes, move types to central location. -Polygon.prototype.type = Graphics.POLY; -Rectangle.prototype.type = Graphics.RECT; -Circle.prototype.type = Graphics.CIRC; -Ellipse.prototype.type = Graphics.ELIP; -RoundedRectangle.prototype.type = Graphics.RREC; +math.Polygon.prototype.type = Graphics.POLY; +math.Rectangle.prototype.type = Graphics.RECT; +math.Circle.prototype.type = Graphics.CIRC; +math.Ellipse.prototype.type = Graphics.ELIP; +math.RoundedRectangle.prototype.type = Graphics.RREC; diff --git a/src/primitives/GraphicsData.js b/src/primitives/GraphicsData.js index c0315ef..9377ef7 100644 --- a/src/primitives/GraphicsData.js +++ b/src/primitives/GraphicsData.js @@ -17,7 +17,7 @@ this.shape = shape; this.type = shape.type; -}; +} GraphicsData.prototype.constructor = GraphicsData; module.exports = GraphicsData; diff --git a/src/renderers/canvas/CanvasGraphics.js b/src/renderers/canvas/CanvasGraphics.js index d8b34b5..92e68a1 100644 --- a/src/renderers/canvas/CanvasGraphics.js +++ b/src/renderers/canvas/CanvasGraphics.js @@ -1,3 +1,5 @@ +var Graphics = require('../../primitives/Graphics'); + /** * A set of functions used by the canvas renderer to draw the primitive graphics data. * @@ -271,7 +273,9 @@ }; CanvasGraphics.updateGraphicsTint = function (graphics) { - if (graphics.tint === 0xFFFFFF)return; + if (graphics.tint === 0xFFFFFF) { + return; + } var tintR = (graphics.tint >> 16 & 0xFF) / 255; var tintG = (graphics.tint >> 8 & 0xFF) / 255; diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js index 4402e77..f36ef72 100644 --- a/src/renderers/canvas/CanvasRenderer.js +++ b/src/renderers/canvas/CanvasRenderer.js @@ -1,4 +1,6 @@ -var utils = require('../../utils'); +var CanvasMaskManager = require('./utils/CanvasMaskManager'), + utils = require('../../utils'), + CONST = require('../../const'); /** * 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. @@ -17,16 +19,18 @@ */ function CanvasRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === "undefined") options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello("Canvas"); + utils.sayHello('Canvas'); defaultRenderer = this; } @@ -35,7 +39,7 @@ * * @member {number} */ - this.type = CANVAS_RENDERER; + this.type = CONST.CANVAS_RENDERER; /** * The resolution of the canvas. @@ -94,13 +98,13 @@ * * @member {HTMLCanvasElement} */ - this.view = options.view || document.createElement( "canvas" ); + this.view = options.view || document.createElement('canvas'); /** * The canvas 2d context that everything is drawn with * @member {CanvasRenderingContext2D} */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + this.context = this.view.getContext('2d', { alpha: this.transparent }); /** * Boolean flag controlling canvas refresh. @@ -147,21 +151,21 @@ this.resize(width, height); if (this.context.imageSmoothingEnabled) { - this.renderSession.smoothProperty = "imageSmoothingEnabled"; + this.renderSession.smoothProperty = 'imageSmoothingEnabled'; } else if (this.context.webkitImageSmoothingEnabled) { - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'webkitImageSmoothingEnabled'; } else if (this.context.mozImageSmoothingEnabled) { - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'mozImageSmoothingEnabled'; } else if (this.context.oImageSmoothingEnabled) { - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'oImageSmoothingEnabled'; } else if (this.context.msImageSmoothingEnabled) { - this.renderSession.smoothProperty = "msImageSmoothingEnabled"; + this.renderSession.smoothProperty = 'msImageSmoothingEnabled'; } -}; +} // constructor CanvasRenderer.prototype.constructor = CanvasRenderer; @@ -179,11 +183,11 @@ this.context.globalAlpha = 1; - this.renderSession.currentBlendMode = blendModes.NORMAL; - this.context.globalCompositeOperation = blendModesCanvas[blendModes.NORMAL]; + this.renderSession.currentBlendMode = CONST.blendModes.NORMAL; + this.context.globalCompositeOperation = blendModesCanvas[CONST.blendModes.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; + this.context.fillStyle = 'black'; this.context.clear(); } @@ -215,7 +219,7 @@ * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. */ CanvasRenderer.prototype.destroy = function (removeView) { - if (typeof removeView === "undefined") { + if (typeof removeView === 'undefined') { removeView = true; } @@ -243,8 +247,8 @@ this.view.height = this.height; if (this.autoResize) { - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; } }; @@ -271,43 +275,43 @@ blendModesCanvas = []; if (utils.canUseNewCanvasBlendModes()) { - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "multiply"; - blendModesCanvas[blendModes.SCREEN] = "screen"; - blendModesCanvas[blendModes.OVERLAY] = "overlay"; - blendModesCanvas[blendModes.DARKEN] = "darken"; - blendModesCanvas[blendModes.LIGHTEN] = "lighten"; - blendModesCanvas[blendModes.COLOR_DODGE] = "color-dodge"; - blendModesCanvas[blendModes.COLOR_BURN] = "color-burn"; - blendModesCanvas[blendModes.HARD_LIGHT] = "hard-light"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "soft-light"; - blendModesCanvas[blendModes.DIFFERENCE] = "difference"; - blendModesCanvas[blendModes.EXCLUSION] = "exclusion"; - blendModesCanvas[blendModes.HUE] = "hue"; - blendModesCanvas[blendModes.SATURATION] = "saturation"; - blendModesCanvas[blendModes.COLOR] = "color"; - blendModesCanvas[blendModes.LUMINOSITY] = "luminosity"; + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'multiply'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'screen'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'overlay'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'darken'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'lighten'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'color-dodge'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'color-burn'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'hard-light'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'soft-light'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'difference'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'exclusion'; + blendModesCanvas[CONST.blendModes.HUE] = 'hue'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'saturation'; + blendModesCanvas[CONST.blendModes.COLOR] = 'color'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'luminosity'; } else { - // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough" - blendModesCanvas[blendModes.NORMAL] = "source-over"; - blendModesCanvas[blendModes.ADD] = "lighter"; //IS THIS OK??? - blendModesCanvas[blendModes.MULTIPLY] = "source-over"; - blendModesCanvas[blendModes.SCREEN] = "source-over"; - blendModesCanvas[blendModes.OVERLAY] = "source-over"; - blendModesCanvas[blendModes.DARKEN] = "source-over"; - blendModesCanvas[blendModes.LIGHTEN] = "source-over"; - blendModesCanvas[blendModes.COLOR_DODGE] = "source-over"; - blendModesCanvas[blendModes.COLOR_BURN] = "source-over"; - blendModesCanvas[blendModes.HARD_LIGHT] = "source-over"; - blendModesCanvas[blendModes.SOFT_LIGHT] = "source-over"; - blendModesCanvas[blendModes.DIFFERENCE] = "source-over"; - blendModesCanvas[blendModes.EXCLUSION] = "source-over"; - blendModesCanvas[blendModes.HUE] = "source-over"; - blendModesCanvas[blendModes.SATURATION] = "source-over"; - blendModesCanvas[blendModes.COLOR] = "source-over"; - blendModesCanvas[blendModes.LUMINOSITY] = "source-over"; + // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough' + blendModesCanvas[CONST.blendModes.NORMAL] = 'source-over'; + blendModesCanvas[CONST.blendModes.ADD] = 'lighter'; //IS THIS OK??? + blendModesCanvas[CONST.blendModes.MULTIPLY] = 'source-over'; + blendModesCanvas[CONST.blendModes.SCREEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.OVERLAY] = 'source-over'; + blendModesCanvas[CONST.blendModes.DARKEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.LIGHTEN] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_DODGE] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR_BURN] = 'source-over'; + blendModesCanvas[CONST.blendModes.HARD_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.SOFT_LIGHT] = 'source-over'; + blendModesCanvas[CONST.blendModes.DIFFERENCE] = 'source-over'; + blendModesCanvas[CONST.blendModes.EXCLUSION] = 'source-over'; + blendModesCanvas[CONST.blendModes.HUE] = 'source-over'; + blendModesCanvas[CONST.blendModes.SATURATION] = 'source-over'; + blendModesCanvas[CONST.blendModes.COLOR] = 'source-over'; + blendModesCanvas[CONST.blendModes.LUMINOSITY] = 'source-over'; } } }; diff --git a/src/renderers/canvas/utils/CanvasBuffer.js b/src/renderers/canvas/utils/CanvasBuffer.js index d606e01..ebe5d47 100644 --- a/src/renderers/canvas/utils/CanvasBuffer.js +++ b/src/renderers/canvas/utils/CanvasBuffer.js @@ -12,14 +12,14 @@ * * @member {HTMLCanvasElement} */ - this.canvas = document.createElement("canvas"); + this.canvas = document.createElement('canvas'); /** * A CanvasRenderingContext2D object representing a two-dimensional rendering context. * * @member {CanvasRenderingContext2D} */ - this.context = this.canvas.getContext("2d"); + this.context = this.canvas.getContext('2d'); this.canvas.width = width; this.canvas.height = height; diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js index 3d8e32f..6e61b61 100644 --- a/src/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/renderers/canvas/utils/CanvasMaskManager.js @@ -6,8 +6,7 @@ * @class * @namespace PIXI */ -function CanvasMaskManager() { -} +function CanvasMaskManager() {} CanvasMaskManager.prototype.constructor = CanvasMaskManager; module.exports = CanvasMaskManager; diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js index d14f59c..17e0529 100644 --- a/src/renderers/canvas/utils/CanvasTinter.js +++ b/src/renderers/canvas/utils/CanvasTinter.js @@ -19,7 +19,7 @@ color = CanvasTinter.roundColor(color); - var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -28,7 +28,7 @@ } // clone texture.. - var canvas = CanvasTinter.canvas || document.createElement("canvas"); + var canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -50,25 +50,25 @@ }; /** - * Tint a texture using the "multiply" operation. + * Tint a texture using the 'multiply' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithMultiply = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "multiply"; + context.globalCompositeOperation = 'multiply'; context.drawImage( texture.baseTexture.source, @@ -82,7 +82,7 @@ crop.height ); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, @@ -98,25 +98,25 @@ }; /** - * Tint a texture using the "overlay" operation. + * Tint a texture using the 'overlay' operation. * * @param texture {Texture} the texture to tint * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithOverlay = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; - context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); + context.globalCompositeOperation = 'copy'; + context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); context.fillRect(0, 0, crop.width, crop.height); - context.globalCompositeOperation = "destination-atop"; + context.globalCompositeOperation = 'destination-atop'; context.drawImage( texture.baseTexture.source, crop.x, @@ -129,7 +129,7 @@ crop.height ); - // context.globalCompositeOperation = "copy"; + // context.globalCompositeOperation = 'copy'; }; /** @@ -140,14 +140,14 @@ * @param canvas {HTMLCanvasElement} the current canvas */ CanvasTinter.tintWithPerPixel = function (texture, color, canvas) { - var context = canvas.getContext( "2d" ); + var context = canvas.getContext( '2d' ); var crop = texture.crop; canvas.width = crop.width; canvas.height = crop.height; - context.globalCompositeOperation = "copy"; + context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, crop.x, diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js index 7eb67ef..78dd426 100644 --- a/src/renderers/webgl/WebGLRenderer.js +++ b/src/renderers/webgl/WebGLRenderer.js @@ -1,4 +1,12 @@ -var utils = require('../../utils'); +var WebGLShaderManager = require('./utils/WebGLShaderManager'), + WebGLSpriteBatch = require('./utils/WebGLSpriteBatch'), + WebGLMaskManager = require('./utils/WebGLMaskManager'), + WebGLFilterManager = require('./utils/WebGLFilterManager'), + WebGLStencilManager = require('./utils/WebGLStencilManager'), + WebGLBlendModeManager = require('./utils/WebGLBlendModeManager'), + math = require('../../math'), + utils = require('../../utils'), + CONST = require('../../const'); glContexts = []; // this is where we store the webGL contexts for easy access. instances = []; @@ -23,23 +31,25 @@ */ function WebGLRenderer(width, height, options) { if (options) { - for (var i in defaultRenderOptions) { - if (typeof options[i] === 'undefined') options[i] = defaultRenderOptions[i]; + for (var i in CONST.defaultRenderOptions) { + if (typeof options[i] === 'undefined') { + options[i] = CONST.defaultRenderOptions[i]; + } } } else { - options = defaultRenderOptions; + options = CONST.defaultRenderOptions; } if (!defaultRenderer) { - sayHello('webGL'); + utils.sayHello('webGL'); defaultRenderer = this; } /** * @member {number} */ - this.type = WEBGL_RENDERER; + this.type = CONST.WEBGL_RENDERER; /** * The resolution of the renderer @@ -136,12 +146,12 @@ /** * @member {Point} */ - this.projection = new Point(); + this.projection = new math.Point(); /** * @member {Point} */ - this.offset = new Point(0, 0); + this.offset = new math.Point(0, 0); // time to create the render managers! each one focuses on managing a state in webGL @@ -202,7 +212,7 @@ // map some webGL blend modes.. this.mapBlendModes(); -}; +} // constructor WebGLRenderer.prototype.constructor = WebGLRenderer; @@ -252,11 +262,15 @@ */ WebGLRenderer.prototype.render = function (stage) { // no point rendering if our context has been blown up! - if (this.contextLost)return; + if (this.contextLost) { + return; + } // if rendering a new stage clear the batches.. if (this.__stage !== stage) { - if (stage.interactive)stage.interactionManager.removeEvents(); + if (stage.interactive) { + stage.interactionManager.removeEvents(); + } // TODO make this work // dont think this is needed any more? @@ -311,7 +325,7 @@ * @param buffer {Array} a standard WebGL buffer */ WebGLRenderer.prototype.renderDisplayObject = function (displayObject, projection, buffer) { - this.renderSession.blendModeManager.setBlendMode(blendModes.NORMAL); + this.renderSession.blendModeManager.setBlendMode(CONST.blendModes.NORMAL); // reset the render session data.. this.renderSession.drawCount = 0; @@ -368,26 +382,30 @@ * @param texture {Texture} the texture to update */ WebGLRenderer.prototype.updateTexture = function (texture) { - if (!texture.hasLoaded )return; + if (!texture.hasLoaded) { + return; + } var gl = this.gl; - if (!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + if (!texture._glTextures[gl.id]) { + texture._glTextures[gl.id] = gl.createTexture(); + } gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); } else { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); } // reguler... @@ -426,8 +444,8 @@ this.initContext(); // empty all the ol gl textures as they are useless now - for (var key in TextureCache) { - var texture = TextureCache[key].baseTexture; + for (var key in utils.TextureCache) { + var texture = utils.TextureCache[key].baseTexture; texture._glTextures = []; } @@ -473,23 +491,23 @@ if (!blendModesWebGL) { blendModesWebGL = []; - blendModesWebGL[blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - blendModesWebGL[blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - blendModesWebGL[blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - blendModesWebGL[blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + blendModesWebGL[CONST.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + blendModesWebGL[CONST.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + blendModesWebGL[CONST.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; } }; diff --git a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js index b83def8..c4c0001 100644 --- a/src/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ ComplexPrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/PixiFastShader.js b/src/renderers/webgl/shaders/PixiFastShader.js index b1d85c1..58309cf 100644 --- a/src/renderers/webgl/shaders/PixiFastShader.js +++ b/src/renderers/webgl/shaders/PixiFastShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -88,7 +91,7 @@ PixiFastShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PixiShader.js b/src/renderers/webgl/shaders/PixiShader.js index 60d956b..2d67a4f 100644 --- a/src/renderers/webgl/shaders/PixiShader.js +++ b/src/renderers/webgl/shaders/PixiShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -74,7 +77,7 @@ PixiShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc || PixiShader.defaultVertexSrc, this.fragmentSrc); gl.useProgram(program); diff --git a/src/renderers/webgl/shaders/PrimitiveShader.js b/src/renderers/webgl/shaders/PrimitiveShader.js index ba73b04..2f5891e 100644 --- a/src/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/renderers/webgl/shaders/PrimitiveShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -70,7 +73,7 @@ PrimitiveShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/shaders/StripShader.js b/src/renderers/webgl/shaders/StripShader.js index 3f7a586..ee91348 100644 --- a/src/renderers/webgl/shaders/StripShader.js +++ b/src/renderers/webgl/shaders/StripShader.js @@ -1,3 +1,6 @@ +var utils = require('../../../utils'), + glUtils = require('../utils/WebGLShaderUtils'); + /** * @class * @namespace PIXI @@ -8,7 +11,7 @@ * @member {number} * @private */ - this._UID = _UID++; + this._UID = utils.uuid(); /** * @member {WebGLContext} @@ -75,7 +78,7 @@ StripShader.prototype.init = function () { var gl = this.gl; - var program = compileProgram(gl, this.vertexSrc, this.fragmentSrc); + var program = glUtils.compileProgram(gl, this.vertexSrc, this.fragmentSrc); gl.useProgram(program); // get and store the uniforms for the shader diff --git a/src/renderers/webgl/utils/FilterTexture.js b/src/renderers/webgl/utils/FilterTexture.js index f9961ad..63d01fd 100644 --- a/src/renderers/webgl/utils/FilterTexture.js +++ b/src/renderers/webgl/utils/FilterTexture.js @@ -1,3 +1,5 @@ +var CONST = require('../../../const'); + /** * @class * @namespace PIXI @@ -27,11 +29,11 @@ /** * @member {number} */ - scaleMode = scaleMode || scaleModes.DEFAULT; + scaleMode = scaleMode || CONST.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); 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 ); @@ -45,7 +47,7 @@ gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); this.resize(width, height); -}; +} FilterTexture.prototype.constructor = FilterTexture; module.exports = FilterTexture; @@ -68,7 +70,9 @@ * @param height {number} the new height of the texture */ 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; diff --git a/src/renderers/webgl/utils/TextureUvs.js b/src/renderers/webgl/utils/TextureUvs.js new file mode 100644 index 0000000..b9bbb58 --- /dev/null +++ b/src/renderers/webgl/utils/TextureUvs.js @@ -0,0 +1,15 @@ +function TextureUvs() { + this.x0 = 0; + this.y0 = 0; + + this.x1 = 0; + this.y1 = 0; + + this.x2 = 0; + this.y2 = 0; + + this.x3 = 0; + this.y3 = 0; +} + +module.exports = TextureUvs; diff --git a/src/renderers/webgl/utils/WebGLBlendModeManager.js b/src/renderers/webgl/utils/WebGLBlendModeManager.js index 105ea64..5085e46 100644 --- a/src/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/renderers/webgl/utils/WebGLBlendModeManager.js @@ -8,7 +8,7 @@ * @member {number} */ this.currentBlendMode = 99999; -}; +} WebGLBlendModeManager.prototype.constructor = WebGLBlendModeManager; module.exports = WebGLBlendModeManager; @@ -28,7 +28,9 @@ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD */ WebGLBlendModeManager.prototype.setBlendMode = function (blendMode) { - if (this.currentBlendMode === blendMode)return false; + if (this.currentBlendMode === blendMode) { + return false; + } this.currentBlendMode = blendMode; diff --git a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js index 88481dc..f18b88b 100644 --- a/src/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -106,7 +106,7 @@ this.matrix = null; this.setContext(gl); -}; +} WebGLFastSpriteBatch.prototype.constructor = WebGLFastSpriteBatch; module.exports = WebGLFastSpriteBatch; @@ -162,7 +162,9 @@ // if the uvs have not updated then no point rendering just yet! // check texture. - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } this.currentBaseTexture = sprite.texture.baseTexture; @@ -184,14 +186,18 @@ */ WebGLFastSpriteBatch.prototype.renderSprite = function (sprite) { //sprite = children[i]; - if (!sprite.visible)return; + if (!sprite.visible) { + return; + } // TODO trim?? if (sprite.texture.baseTexture !== this.currentBaseTexture) { this.flush(); this.currentBaseTexture = sprite.texture.baseTexture; - if (!sprite.texture._uvs)return; + if (!sprite.texture._uvs) { + return; + } } var uvs, vertices = this.vertices, width, height, w0, w1, h0, h1, index; @@ -319,13 +325,17 @@ */ WebGLFastSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; // bind the current texture - if (!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + if (!this.currentBaseTexture._glTextures[gl.id]) { + this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); + } gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); diff --git a/src/renderers/webgl/utils/WebGLFilterManager.js b/src/renderers/webgl/utils/WebGLFilterManager.js index 865b353..b971573 100644 --- a/src/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/renderers/webgl/utils/WebGLFilterManager.js @@ -1,3 +1,6 @@ +var FilterTexture = require('./FilterTexture'), + PixiShader = require('../shaders/PixiShader'); + /** * @class * @namespace PIXI @@ -17,7 +20,7 @@ * @member {number} */ this.offsetY = 0; -}; +} WebGLFilterManager.prototype.constructor = WebGLFilterManager; module.exports = WebGLFilterManager; @@ -89,10 +92,21 @@ filterArea.height += padding * 2; // 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; + 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; + } //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); @@ -162,7 +176,9 @@ var inputTexture = texture; var outputTexture = this.texturePool.pop(); - if (!outputTexture)outputTexture = new FilterTexture(this.gl, this.width, this.height); + if (!outputTexture) { + outputTexture = new FilterTexture(this.gl, this.width, this.height); + } outputTexture.resize(this.width, this.height); // need to clear this FBO as it may have some left over elements from a previous filter. diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js index 8f333f2..1c63370 100644 --- a/src/renderers/webgl/utils/WebGLGraphics.js +++ b/src/renderers/webgl/utils/WebGLGraphics.js @@ -1,4 +1,7 @@ -var utils = require('../../../utils'); +var utils = require('../../../utils'), + math = require('../../../math'), + Graphics = require('../../../primitives/Graphics'), + WebGLGraphicsData = require('./WebGLGraphicsData'); /** * A set of functions used by the webGL renderer to draw the primitive graphics data @@ -16,7 +19,7 @@ * @param graphics {Graphics} * @param renderSession {object} */ -WebGLGraphics.renderGraphics = function (graphics, renderSession)//projection, offset) { +WebGLGraphics.renderGraphics = function (graphics, renderSession) {//projection, offset) { var gl = renderSession.gl; var projection = renderSession.projection, offset = renderSession.offset, @@ -83,8 +86,11 @@ WebGLGraphics.updateGraphics = function (graphics, gl) { // get the contexts graphics object var webGL = graphics._webGL[gl.id]; + // if the graphics object does not exist in the webGL context time to create it! - if (!webGL)webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + if (!webGL) { + webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl}; + } // flag the graphics as not dirty as we are about to update it... graphics.dirty = false; @@ -174,7 +180,10 @@ // upload all the dirty data... for (i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; - if (webGLData.dirty)webGLData.upload(); + + if (webGLData.dirty) { + webGLData.upload(); + } } }; @@ -308,7 +317,7 @@ var vecPos = verts.length/6; - var triangles = PolyK.Triangulate(recPoints); + var triangles = utils.PolyK.Triangulate(recPoints); // @@ -475,7 +484,10 @@ // TODO OPTIMISE! 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) { @@ -485,8 +497,8 @@ } // get first and last point.. figure out the middle! - var firstPoint = new Point( points[0], points[1] ); - var lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + var firstPoint = new math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { @@ -496,7 +508,7 @@ points.pop(); points.pop(); - lastPoint = new Point( points[points.length - 2], points[points.length - 1] ); + lastPoint = new math.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; @@ -677,7 +689,10 @@ WebGLGraphics.buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); - if (points.length < 6)return; + + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var indices = webGLData.indices; @@ -735,7 +750,9 @@ WebGLGraphics.buildPoly = function (graphicsData, webGLData) { var points = graphicsData.points; - if (points.length < 6)return; + if (points.length < 6) { + return; + } // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -749,9 +766,11 @@ var g = color[1] * alpha; var b = color[2] * alpha; - var triangles = PolyK.Triangulate(points); + var triangles = utils.PolyK.Triangulate(points); - if (!triangles)return false; + if (!triangles) { + return false; + } var vertPos = verts.length / 6; @@ -774,50 +793,3 @@ }; WebGLGraphics.graphicsDataPool = []; - -/** - * @class - * @private - * @static - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -}; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/renderers/webgl/utils/WebGLGraphicsData.js b/src/renderers/webgl/utils/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/renderers/webgl/utils/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/renderers/webgl/utils/WebGLMaskManager.js b/src/renderers/webgl/utils/WebGLMaskManager.js index f89ffce..002c54d 100644 --- a/src/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/renderers/webgl/utils/WebGLMaskManager.js @@ -1,10 +1,11 @@ +var WebGLGraphics = require('./WebGLGraphics'); + /** * @class * @namespace PIXI * @private */ -function WebGLMaskManager() { -}; +function WebGLMaskManager() {} WebGLMaskManager.prototype.constructor = WebGLMaskManager; module.exports = WebGLMaskManager; @@ -31,7 +32,9 @@ WebGLGraphics.updateGraphics(maskData, gl); } - if (!maskData._webGL[gl.id].data.length)return; + if (!maskData._webGL[gl.id].data.length) { + return; + } renderSession.stencilManager.pushStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; diff --git a/src/renderers/webgl/utils/WebGLShaderManager.js b/src/renderers/webgl/utils/WebGLShaderManager.js index de37591..a38774c 100644 --- a/src/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/renderers/webgl/utils/WebGLShaderManager.js @@ -1,3 +1,9 @@ +var PrimitiveShader = require('../shader/PrimitiveShader'), + ComplexPrimitiveShader = require('../shader/ComplexPrimitiveShader'), + PixiShader = require('../shader/PixiShader'), + PixiFastShader = require('../shader/PixiFastShader'), + StripShader = require('../shader/StripShader'); + /** * @class * @namespace PIXI @@ -27,8 +33,7 @@ * @member {Array} */ this.stack = []; - -}; +} WebGLShaderManager.prototype.constructor = WebGLShaderManager; module.exports = WebGLShaderManager; @@ -99,7 +104,9 @@ * @param shader {Any} */ WebGLShaderManager.prototype.setShader = function (shader) { - if (this._currentId === shader._UID)return false; + if (this._currentId === shader._UID) { + return false; + } this._currentId = shader._UID; diff --git a/src/renderers/webgl/utils/WebGLShaderUtils.js b/src/renderers/webgl/utils/WebGLShaderUtils.js index 3d3b2e0..2942e33 100644 --- a/src/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/renderers/webgl/utils/WebGLShaderUtils.js @@ -35,7 +35,7 @@ * @return {Any} */ _CompileShader: function (gl, shaderSrc, shaderType) { - var src = shaderSrc.join("\n"); + var src = shaderSrc.join('\n'); var shader = gl.createShader(shaderType); gl.shaderSource(shader, src); gl.compileShader(shader); @@ -66,7 +66,7 @@ gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - window.console.log("Could not initialise shaders"); + window.console.log('Could not initialise shaders'); } return shaderProgram; diff --git a/src/renderers/webgl/utils/WebGLSpriteBatch.js b/src/renderers/webgl/utils/WebGLSpriteBatch.js index 9e28881..c381aba 100644 --- a/src/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/renderers/webgl/utils/WebGLSpriteBatch.js @@ -1,3 +1,7 @@ +var AbstractFilter = require('../../../filters/AbstractFilter'), + PixiShader = require('../shaders/PixiShader'), + TextureUvs = require('./TextureUvs'); + /** * @author Mat Groves * @@ -126,7 +130,7 @@ ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', '}' ]); -}; +} /** * @param gl {WebGLContext} the current WebGL drawing context @@ -189,8 +193,11 @@ // get the uvs for the texture var uvs = texture._uvs; + // if the uvs have not updated then no point rendering just yet! - if (!uvs)return; + if (!uvs) { + return; + } // TODO trim?? var aX = sprite.anchor.x; @@ -309,10 +316,12 @@ this.currentBaseTexture = texture.baseTexture; } - // set the textures uvs temporarily + // set the textures uvs temporarily // TODO create a separate texture so that we can tile part of a texture - if (!tilingSprite._uvs)tilingSprite._uvs = new TextureUvs(); + if (!tilingSprite._uvs) { + tilingSprite._uvs = new TextureUvs(); + } var uvs = tilingSprite._uvs; @@ -415,7 +424,9 @@ */ WebGLSpriteBatch.prototype.flush = function () { // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize===0)return; + if (this.currentBatchSize === 0) { + return; + } var gl = this.gl; var shader; @@ -502,7 +513,9 @@ // set shader function??? this.renderSession.shaderManager.setShader(shader); - if (shader.dirty)shader.syncUniforms(); + if (shader.dirty) { + shader.syncUniforms(); + } // both thease only need to be set if they are changing.. // set the projection @@ -532,7 +545,9 @@ * @param startIndex {number} */ WebGLSpriteBatch.prototype.renderBatch = function (texture, size, startIndex) { - if (size === 0)return; + if (size === 0) { + return; + } var gl = this.gl; diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js index 40c2acc..ddba5a1 100644 --- a/src/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/renderers/webgl/utils/WebGLStencilManager.js @@ -9,7 +9,7 @@ this.stencilStack = []; this.reverse = true; this.count = 0; -}; +} WebGLStencilManager.prototype.constructor = WebGLStencilManager; module.exports = WebGLStencilManager; diff --git a/src/text/BitmapText.js b/src/text/BitmapText.js index e4f0fab..cf83a33 100644 --- a/src/text/BitmapText.js +++ b/src/text/BitmapText.js @@ -1,3 +1,7 @@ +var DisplayObjectContainer = require('../display/DisplayObjectContainer'), + Sprite = require('../display/Sprite'), + math = require('../math'); + /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using: @@ -49,7 +53,7 @@ * @member {boolean} */ this.dirty = false; -}; +} // constructor BitmapText.prototype = Object.create(DisplayObjectContainer.prototype); @@ -93,7 +97,7 @@ */ BitmapText.prototype.updateText = function () { var data = BitmapText.fonts[this.fontName]; - var pos = new Point(); + var pos = new math.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; @@ -117,13 +121,15 @@ var charData = data.chars[charCode]; - if (!charData) continue; + if (!charData) { + continue; + } if (prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; @@ -136,12 +142,14 @@ for (i = 0; i <= line; i++) { var alignOffset = 0; + if (this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if (this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } + lineAlignOffsets.push(alignOffset); } @@ -152,14 +160,21 @@ for (i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. - if (c) c.setTexture(chars[i].texture); // check if got one before. - else c = new Sprite(chars[i].texture); // if no create new one. + if (c) { + c.setTexture(chars[i].texture); // check if got one before. + } + else { + c = new Sprite(chars[i].texture); // if no create new one. + } 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; c.tint = tint; - if (!c.parent) this.addChild(c); + + if (!c.parent) { + this.addChild(c); + } } // remove unnecessary children. diff --git a/src/text/Text.js b/src/text/Text.js index 0b9ca46..347ae22 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,3 +1,6 @@ +var Sprite = require('../display/Sprite'), + Texture = require('../display/Texture'); + /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. @@ -43,8 +46,7 @@ this.setText(text); this.setStyle(style); - -}; +} // constructor Text.prototype = Object.create(Sprite.prototype); @@ -154,7 +156,9 @@ // word wrap // preserve original text - if (this.style.wordWrap)outputText = this.wordWrap(this.text); + if (this.style.wordWrap) { + outputText = this.wordWrap(this.text); + } //split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); @@ -170,7 +174,9 @@ } var width = maxLineWidth + this.style.strokeThickness; - if (this.style.dropShadow)width += this.style.dropShadowDistance; + if (this.style.dropShadow) { + width += this.style.dropShadowDistance; + } this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; @@ -178,13 +184,17 @@ var lineHeight = fontProperties.fontSize + this.style.strokeThickness; var height = lineHeight * lines.length; - if (this.style.dropShadow)height += this.style.dropShadowDistance; + if (this.style.dropShadow) { + height += this.style.dropShadowDistance; + } this.canvas.height = height * this.resolution; this.context.scale( this.resolution, this.resolution); - if (navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height); + if (navigator.isCocoonJS) { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } // used for debugging.. //this.context.fillStyle ="#FF0000" diff --git a/src/textures/BaseTexture.js b/src/textures/BaseTexture.js index bd9ebad..26565cd 100644 --- a/src/textures/BaseTexture.js +++ b/src/textures/BaseTexture.js @@ -1,6 +1,5 @@ -BaseTextureCache = {}; - -BaseTextureCacheIdGenerator = 0; +var utils = require('../utils'), + CONST = require('../const'); /** * A texture stores the information that represents an image. All textures have a base texture. @@ -41,7 +40,7 @@ * @member {{number}} * @default scaleModes.LINEAR */ - this.scaleMode = scaleMode || scaleModes.DEFAULT; + this.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; /** * Set to true once the base texture has loaded @@ -58,7 +57,7 @@ */ this.source = source; - this._UID = _UID++; + this._UID = utils.uuid(); /** * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) @@ -139,7 +138,7 @@ BaseTexture.prototype.constructor = BaseTexture; module.exports = BaseTexture; -EventTarget.mixin(BaseTexture.prototype); +utils.EventTarget.mixin(BaseTexture.prototype); /** * Destroys this base texture @@ -147,13 +146,15 @@ */ BaseTexture.prototype.destroy = function () { if (this.imageUrl) { - delete BaseTextureCache[this.imageUrl]; - delete TextureCache[this.imageUrl]; + delete utils.BaseTextureCache[this.imageUrl]; + delete utils.TextureCache[this.imageUrl]; this.imageUrl = null; - if (!navigator.isCocoonJS) this.source.src = ''; + if (!navigator.isCocoonJS) { + this.source.src = ''; + } } else if (this.source && this.source._pixiId) { - delete BaseTextureCache[this.source._pixiId]; + delete utils.BaseTextureCache[this.source._pixiId]; } this.source = null; @@ -216,9 +217,11 @@ * @return BaseTexture */ BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var baseTexture = BaseTextureCache[imageUrl]; + var baseTexture = utils.BaseTextureCache[imageUrl]; - if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; + if (crossorigin === undefined && imageUrl.indexOf('data:') === -1) { + crossorigin = true; + } if (!baseTexture) { // new Image() breaks tex loading in some versions of Chrome. @@ -231,10 +234,10 @@ image.src = imageUrl; baseTexture = new BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; - BaseTextureCache[imageUrl] = baseTexture; + utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(RETINA_PREFIX + '.') !== -1) { + if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) { baseTexture.resolution = 2; } } @@ -252,14 +255,14 @@ */ BaseTexture.fromCanvas = function (canvas, scaleMode) { if (!canvas._pixiId) { - canvas._pixiId = 'canvas_' + TextureCacheIdGenerator++; + canvas._pixiId = 'canvas_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[canvas._pixiId]; + var baseTexture = utils.BaseTextureCache[canvas._pixiId]; if (!baseTexture) { baseTexture = new BaseTexture(canvas, scaleMode); - BaseTextureCache[canvas._pixiId] = baseTexture; + utils.BaseTextureCache[canvas._pixiId] = baseTexture; } return baseTexture; diff --git a/src/textures/RenderTexture.js b/src/textures/RenderTexture.js index 61a238c..e887054 100644 --- a/src/textures/RenderTexture.js +++ b/src/textures/RenderTexture.js @@ -1,3 +1,10 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + FilterTexture = require('./FilterTexture'), + CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'), + math = require('../math'), + CONST = require('../const'); + /** * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * @@ -58,7 +65,7 @@ * * @member {Rectangle} */ - this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -66,7 +73,7 @@ * * @member {Rectangle} */ - this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * The base texture object that this texture uses @@ -79,13 +86,13 @@ this.baseTexture._glTextures = []; this.baseTexture.resolution = this.resolution; - this.baseTexture.scaleMode = scaleMode || scaleModes.DEFAULT; + this.baseTexture.scaleMode = scaleMode || CONST.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; Texture.call(this, this.baseTexture, - new Rectangle(0, 0, this.width, this.height) + new math.Rectangle(0, 0, this.width, this.height) ); /** @@ -95,7 +102,7 @@ */ this.renderer = renderer || defaultRenderer; - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; this.baseTexture._dirty[gl.id] = false; @@ -103,7 +110,7 @@ this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new Point(this.width*0.5, -this.height*0.5); + this.projection = new math.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; @@ -131,7 +138,9 @@ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well? */ RenderTexture.prototype.resize = function (width, height, updateBase) { - if (width === this.width && height === this.height)return; + if (width === this.width && height === this.height) { + return; + } this.valid = (width > 0 && height > 0); @@ -143,12 +152,14 @@ this.baseTexture.height = this.height; } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - if (!this.valid)return; + if (!this.valid) { + return; + } this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; @@ -158,9 +169,11 @@ * */ RenderTexture.prototype.clear = function () { - if (!this.valid)return; + if (!this.valid) { + return; + } - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } @@ -176,14 +189,18 @@ * @private */ RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } //TOOD replace position with matrix.. //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix var wt = displayObject.worldTransform; wt.identity(); wt.translate(0, this.projection.y * 2); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } wt.scale(1,-1); // setWorld Alpha to ensure that the object is renderer at full opacity @@ -203,7 +220,9 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } this.renderer.spriteBatch.dirty = true; @@ -222,11 +241,15 @@ * @private */ RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear) { - if (!this.valid)return; + if (!this.valid) { + return; + } var wt = displayObject.worldTransform; wt.identity(); - if (matrix)wt.append(matrix); + if (matrix) { + wt.append(matrix); + } // setWorld Alpha to ensure that the object is renderer at full opacity displayObject.worldAlpha = 1; @@ -238,7 +261,9 @@ children[i].updateTransform(); } - if (clear)this.textureBuffer.clear(); + if (clear) { + this.textureBuffer.clear(); + } var context = this.textureBuffer.context; @@ -277,7 +302,7 @@ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. */ RenderTexture.prototype.getCanvas = function () { - if (this.renderer.type === WEBGL_RENDERER) { + if (this.renderer.type === CONST.WEBGL_RENDERER) { var gl = this.renderer.gl; var width = this.textureBuffer.width; var height = this.textureBuffer.height; @@ -301,4 +326,4 @@ } }; -RenderTexture.tempMatrix = new Matrix(); +RenderTexture.tempMatrix = new math.Matrix(); diff --git a/src/textures/Texture.js b/src/textures/Texture.js index 1426375..f8e8609 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -1,9 +1,8 @@ -var Rectangle = require('./Rectangle'); - -TextureCache = {}; -FrameCache = {}; - -TextureCacheIdGenerator = 0; +var BaseTexture = require('./BaseTexture'), + Rectangle = require('./Rectangle'), + EventTarget = require('../utils/EventTarget'), + TextureUvs = require('../renderers/webgl/utils/TextureUvs'), + utils = require('../utils'); /** * A texture stores the information that represents an image or part of an image. It cannot be added @@ -100,7 +99,9 @@ this.crop = crop || new Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { - if (this.noFrame) frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(frame); } else { @@ -122,7 +123,9 @@ var baseTexture = this.baseTexture; baseTexture.removeEventListener('loaded', this.onLoaded); - if (this.noFrame) this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (this.noFrame) { + this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + } this.setFrame(this.frame); @@ -135,7 +138,9 @@ * @param destroyBase {boolean} Whether to destroy the base texture as well */ Texture.prototype.destroy = function (destroyBase) { - if (destroyBase) this.baseTexture.destroy(); + if (destroyBase) { + this.baseTexture.destroy(); + } this.valid = false; }; @@ -170,7 +175,9 @@ this.frame.height = this.trim.height; } - if (this.valid) this._updateUvs(); + if (this.valid) { + this._updateUvs(); + } }; @@ -212,11 +219,11 @@ * @return Texture */ Texture.fromImage = function (imageUrl, crossorigin, scaleMode) { - var texture = TextureCache[imageUrl]; + var texture = utils.TextureCache[imageUrl]; if (!texture) { texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); - TextureCache[imageUrl] = texture; + utils.TextureCache[imageUrl] = texture; } return texture; @@ -231,8 +238,10 @@ * @return Texture */ Texture.fromFrame = function (frameId) { - var texture = TextureCache[frameId]; - if (!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + var texture = utils.TextureCache[frameId]; + if (!texture) { + throw new Error('The frameId "' + frameId + '" does not exist in the texture cache '); + } return texture; }; @@ -252,45 +261,30 @@ }; /** - * Adds a texture to the global TextureCache. This cache is shared across the whole PIXI object. + * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object. * * @static * @param texture {Texture} The Texture to add to the cache. * @param id {string} The id that the texture will be stored against. */ Texture.addTextureToCache = function (texture, id) { - TextureCache[id] = texture; + utils.TextureCache[id] = texture; }; /** - * Remove a texture from the global TextureCache. + * Remove a texture from the global utils.TextureCache. * * @static * @param id {string} The id of the texture to be removed * @return {Texture} The texture that was removed */ Texture.removeTextureFromCache = function (id) { - var texture = TextureCache[id]; + var texture = utils.TextureCache[id]; - delete TextureCache[id]; - delete BaseTextureCache[id]; + delete utils.TextureCache[id]; + delete utils.BaseTextureCache[id]; return texture; }; -function TextureUvs() { - this.x0 = 0; - this.y0 = 0; - - this.x1 = 0; - this.y1 = 0; - - this.x2 = 0; - this.y2 = 0; - - this.x3 = 0; - this.y3 = 0; -}; - Texture.emptyTexture = new Texture(new BaseTexture()); - diff --git a/src/textures/VideoTexture.js b/src/textures/VideoTexture.js index c3e753d..f61f377 100644 --- a/src/textures/VideoTexture.js +++ b/src/textures/VideoTexture.js @@ -1,3 +1,7 @@ +var BaseTexture = require('./BaseTexture'), + Texture = require('./Texture'), + utils = require('../utils'); + /** * A texture of a [playing] Video. * @@ -83,8 +87,8 @@ VideoTexture.prototype.destroy = function () { if (this.source && this.source._pixiId) { - BaseTextureCache[ this.source._pixiId ] = null; - delete BaseTextureCache[ this.source._pixiId ]; + utils.BaseTextureCache[ this.source._pixiId ] = null; + delete utils.BaseTextureCache[ this.source._pixiId ]; this.source._pixiId = null; delete this.source._pixiId; @@ -103,14 +107,14 @@ */ VideoTexture.baseTextureFromVideo = function (video, scaleMode) { if (!video._pixiId) { - video._pixiId = 'video_' + TextureCacheIdGenerator++; + video._pixiId = 'video_' + utils.TextureCacheIdGenerator++; } - var baseTexture = BaseTextureCache[ video._pixiId ]; + var baseTexture = utils.BaseTextureCache[ video._pixiId ]; if (!baseTexture) { baseTexture = new VideoTexture(video, scaleMode); - BaseTextureCache[ video._pixiId ] = baseTexture; + utils.BaseTextureCache[ video._pixiId ] = baseTexture; } return baseTexture; diff --git a/src/utils/Event.js b/src/utils/Event.js deleted file mode 100644 index 0c187ee..0000000 --- a/src/utils/Event.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Creates an homogenous object for tracking events so users can know what to expect. - * - * @class - * @namespace PIXI - * @param target {object} The target object that the event is called on - * @param name {string} The string name of the event that was triggered - * @param data {object} Arbitrary event data to pass along - */ -function Event(target, name, data) { - // for duck typing in the ".on()" function - this.__isEventObject = true; - - /** - * Tracks the state of bubbling propagation. Do not - * set this directly, instead use `event.stopPropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stopped = false; - - /** - * Tracks the state of sibling listener propagation. Do not - * set this directly, instead use `event.stopImmediatePropagation()` - * - * @member {boolean} - * @private - * @readonly - */ - this.stoppedImmediate = false; - - /** - * The original target the event triggered on. - * - * @member {object} - * @readonly - */ - this.target = target; - - /** - * The string name of the event that this represents. - * - * @member {string} - * @readonly - */ - this.type = name; - - /** - * The data that was passed in with this event. - * - * @member {object} - * @readonly - */ - this.data = data; - - /** - * The timestamp when the event occurred. - * - * @member {number} - * @readonly - */ - this.timeStamp = Date.now(); -}; - -/** - * Stops the propagation of events up the scene graph (prevents bubbling). - * - */ -Event.prototype.stopPropagation = function stopPropagation() { - this.stopped = true; -}; - -/** - * Stops the propagation of events to sibling listeners (no longer calls any listeners). - * - */ -Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() { - this.stoppedImmediate = true; -}; diff --git a/src/utils/EventData.js b/src/utils/EventData.js new file mode 100644 index 0000000..dd0059a --- /dev/null +++ b/src/utils/EventData.js @@ -0,0 +1,81 @@ +/** + * Creates an homogenous object for tracking events so users can know what to expect. + * + * @class + * @namespace PIXI + * @param target {object} The target object that the event is called on + * @param name {string} The string name of the event that was triggered + * @param data {object} Arbitrary event data to pass along + */ +function EventData(target, name, data) { + // for duck typing in the ".on()" function + this.__isEventObject = true; + + /** + * Tracks the state of bubbling propagation. Do not + * set this directly, instead use `event.stopPropagation()` + * + * @member {boolean} + * @private + * @readonly + */ + this.stopped = false; + + /** + * Tracks the state of sibling listener propagation. Do not + * set this directly, instead use `event.stopImmediatePropagation()` + * + * @member {boolean} + * @private + * @readonly + */ + this.stoppedImmediate = false; + + /** + * The original target the event triggered on. + * + * @member {object} + * @readonly + */ + this.target = target; + + /** + * The string name of the event that this represents. + * + * @member {string} + * @readonly + */ + this.type = name; + + /** + * The data that was passed in with this event. + * + * @member {object} + * @readonly + */ + this.data = data; + + /** + * The timestamp when the event occurred. + * + * @member {number} + * @readonly + */ + this.timeStamp = Date.now(); +} + +/** + * Stops the propagation of events up the scene graph (prevents bubbling). + * + */ +EventData.prototype.stopPropagation = function stopPropagation() { + this.stopped = true; +}; + +/** + * Stops the propagation of events to sibling listeners (no longer calls any listeners). + * + */ +EventData.prototype.stopImmediatePropagation = function stopImmediatePropagation() { + this.stoppedImmediate = true; +}; diff --git a/src/utils/EventTarget.js b/src/utils/EventTarget.js index 92a5908..9c374b5 100644 --- a/src/utils/EventTarget.js +++ b/src/utils/EventTarget.js @@ -1,4 +1,4 @@ -var Event = require('./Event'); +var EventData = require('./EventData'); /** * Mixins event emitter functionality to an object. @@ -44,7 +44,7 @@ //ensure we are using a real pixi event if (!data || data.__isEventObject !== true) { - data = new Event(this, eventName, data); + data = new EventData(this, eventName, data); } //iterate the listeners @@ -122,8 +122,9 @@ obj.off = obj.removeEventListener = function off(eventName, fn) { this._listeners = this._listeners || {}; - if (!this._listeners[eventName]) + if (!this._listeners[eventName]) { return this; + } var list = this._listeners[eventName], i = fn ? list.length : 0; @@ -149,14 +150,15 @@ obj.removeAllListeners = function removeAllListeners(eventName) { this._listeners = this._listeners || {}; - if (!this._listeners[eventName]) + if (!this._listeners[eventName]) { return this; + } delete this._listeners[eventName]; return this; }; -}; +} module.exports = { /** @@ -167,4 +169,4 @@ mixin: function mixin(obj) { EventTarget(obj); } -} +}; diff --git a/src/utils/index.js b/src/utils/index.js index 156bd39..bf9f6b3 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,9 +1,20 @@ -var webglEnabled = requrire('webgl-enabled')(); +var CONST = require('../const'); /** * @namespace PIXI */ var utils = module.exports = { + _uid: 0, + + /** + * Gets the next uuid + * + * @return {number} The next uuid to use. + */ + uuid: function () { + return ++utils._uid; + }, + /** * Converts a hex color number to an [R, G, B] array * @@ -86,33 +97,76 @@ }, /** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer + * Logs out the version and renderer information for this running instance of PIXI. + * If you don't want to see this message you can set PIXI.utils.sayHello = false; * - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view - * @param [options] {object} The optional renderer parameters - * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional - * @param [options.transparent=false] {boolean} If the render view is transparent, default false - * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment) - * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2 - * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + * @param {string} type - The string renderer type to log. + * @constant + * @static */ - autoDetectRenderer: function (width, height, options) { - width = width || 800; - height = height || 600; + sayHello: function (type) { + if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { + var args = [ + '%c %c %c Pixi.js ' + CONST.VERSION + ' - ' + type + ' %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ ', + 'background: #ff66a5', + 'background: #ff66a5', + 'color: #ff66a5; background: #030307;', + 'background: #ff66a5', + 'background: #ffc3dc', + 'background: #ff66a5', + 'color: #ff2424; background: #fff', + 'color: #ff2424; background: #fff', + 'color: #ff2424; background: #fff' + ]; - if (webglEnabled) { - return new WebGLRenderer(width, height, options); + console.log.apply(console, args); //jshint ignore:line + } + else if (window.console) { + console.log('Pixi.js ' + CONST.VERSION + ' - http://www.pixijs.com/'); //jshint ignore:line } - return new CanvasRenderer(width, height, options); + utils.sayHello = false; + }, + + /** + * A wrapper for ajax requests to be handled cross browser + * + * TODO: Replace this wil superagent + * + * @class + * @namespace PIXI + */ + AjaxRequest: function () { + 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