diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/test/core/Ellipse.js b/test/core/Ellipse.js new file mode 100644 index 0000000..f2e8234 --- /dev/null +++ b/test/core/Ellipse.js @@ -0,0 +1,71 @@ +'use strict'; + +describe('PIXI.Ellipse', function () +{ + it('should create a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(); + + expect(ellipse1.x).to.equal(0); + expect(ellipse1.y).to.equal(0); + expect(ellipse1.width).to.equal(0); + expect(ellipse1.height).to.equal(0); + + const ellipse2 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should clone a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.x).to.equal(10); + expect(ellipse1.y).to.equal(10); + expect(ellipse1.width).to.equal(5); + expect(ellipse1.height).to.equal(5); + + const ellipse2 = ellipse1.clone(); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should check if point is within ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.contains(10, 10)).to.be.true; + expect(ellipse1.contains(10, 15)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + expect(ellipse1.contains(5, 10)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + + expect(ellipse1.contains(6, 7)).to.be.true; + expect(ellipse1.contains(7, 6)).to.be.true; + expect(ellipse1.contains(7, 7)).to.be.true; + expect(ellipse1.contains(13, 14)).to.be.true; + expect(ellipse1.contains(14, 13)).to.be.true; + + expect(ellipse1.contains(14, 14)).to.be.false; + expect(ellipse1.contains(10, 16)).to.be.false; + expect(ellipse1.contains(11, 15)).to.be.false; + expect(ellipse1.contains(0, 0)).to.be.false; + }); + + it('should return framing rectangle', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + const rect1 = ellipse1.getBounds(); + + expect(rect1.left).to.equal(5); + expect(rect1.top).to.equal(5); + expect(rect1.right).to.equal(10); + expect(rect1.bottom).to.equal(10); + }); +}); diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/test/core/Ellipse.js b/test/core/Ellipse.js new file mode 100644 index 0000000..f2e8234 --- /dev/null +++ b/test/core/Ellipse.js @@ -0,0 +1,71 @@ +'use strict'; + +describe('PIXI.Ellipse', function () +{ + it('should create a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(); + + expect(ellipse1.x).to.equal(0); + expect(ellipse1.y).to.equal(0); + expect(ellipse1.width).to.equal(0); + expect(ellipse1.height).to.equal(0); + + const ellipse2 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should clone a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.x).to.equal(10); + expect(ellipse1.y).to.equal(10); + expect(ellipse1.width).to.equal(5); + expect(ellipse1.height).to.equal(5); + + const ellipse2 = ellipse1.clone(); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should check if point is within ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.contains(10, 10)).to.be.true; + expect(ellipse1.contains(10, 15)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + expect(ellipse1.contains(5, 10)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + + expect(ellipse1.contains(6, 7)).to.be.true; + expect(ellipse1.contains(7, 6)).to.be.true; + expect(ellipse1.contains(7, 7)).to.be.true; + expect(ellipse1.contains(13, 14)).to.be.true; + expect(ellipse1.contains(14, 13)).to.be.true; + + expect(ellipse1.contains(14, 14)).to.be.false; + expect(ellipse1.contains(10, 16)).to.be.false; + expect(ellipse1.contains(11, 15)).to.be.false; + expect(ellipse1.contains(0, 0)).to.be.false; + }); + + it('should return framing rectangle', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + const rect1 = ellipse1.getBounds(); + + expect(rect1.left).to.equal(5); + expect(rect1.top).to.equal(5); + expect(rect1.right).to.equal(10); + expect(rect1.bottom).to.equal(10); + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index c7c7a45..0622cfc 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -128,4 +128,67 @@ expect(graphics.containsPoint(point)).to.be.false; }); }); + + describe('arc', () => + { + it('should draw an arc', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + expect(() => graphics.arc(100, 30, 20, 0, Math.PI)).to.not.throw(); + + expect(graphics.currentPath).to.be.not.null; + }); + + it('should not throw with other shapes', () => + { + // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) + const graphics = new PIXI.Graphics(); + + // set a fill and line style + graphics.beginFill(0xFF3300); + graphics.lineStyle(4, 0xffd900, 1); + + // draw a shape + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + graphics.endFill(); + + graphics.lineStyle(2, 0xFF00FF, 1); + graphics.beginFill(0xFF00BB, 0.25); + graphics.drawRoundedRect(150, 450, 300, 100, 15); + graphics.endFill(); + + graphics.beginFill(); + graphics.lineStyle(4, 0x00ff00, 1); + + expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); + }); + + it('should do nothing when startAngle and endAngle are equal', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 0, 0); + + expect(graphics.currentPath).to.be.null; + }); + + it('should do nothing if sweep equals zero', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 10, 10); + + expect(graphics.currentPath).to.be.null; + }); + }); }); diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/test/core/Ellipse.js b/test/core/Ellipse.js new file mode 100644 index 0000000..f2e8234 --- /dev/null +++ b/test/core/Ellipse.js @@ -0,0 +1,71 @@ +'use strict'; + +describe('PIXI.Ellipse', function () +{ + it('should create a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(); + + expect(ellipse1.x).to.equal(0); + expect(ellipse1.y).to.equal(0); + expect(ellipse1.width).to.equal(0); + expect(ellipse1.height).to.equal(0); + + const ellipse2 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should clone a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.x).to.equal(10); + expect(ellipse1.y).to.equal(10); + expect(ellipse1.width).to.equal(5); + expect(ellipse1.height).to.equal(5); + + const ellipse2 = ellipse1.clone(); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should check if point is within ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.contains(10, 10)).to.be.true; + expect(ellipse1.contains(10, 15)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + expect(ellipse1.contains(5, 10)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + + expect(ellipse1.contains(6, 7)).to.be.true; + expect(ellipse1.contains(7, 6)).to.be.true; + expect(ellipse1.contains(7, 7)).to.be.true; + expect(ellipse1.contains(13, 14)).to.be.true; + expect(ellipse1.contains(14, 13)).to.be.true; + + expect(ellipse1.contains(14, 14)).to.be.false; + expect(ellipse1.contains(10, 16)).to.be.false; + expect(ellipse1.contains(11, 15)).to.be.false; + expect(ellipse1.contains(0, 0)).to.be.false; + }); + + it('should return framing rectangle', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + const rect1 = ellipse1.getBounds(); + + expect(rect1.left).to.equal(5); + expect(rect1.top).to.equal(5); + expect(rect1.right).to.equal(10); + expect(rect1.bottom).to.equal(10); + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index c7c7a45..0622cfc 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -128,4 +128,67 @@ expect(graphics.containsPoint(point)).to.be.false; }); }); + + describe('arc', () => + { + it('should draw an arc', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + expect(() => graphics.arc(100, 30, 20, 0, Math.PI)).to.not.throw(); + + expect(graphics.currentPath).to.be.not.null; + }); + + it('should not throw with other shapes', () => + { + // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) + const graphics = new PIXI.Graphics(); + + // set a fill and line style + graphics.beginFill(0xFF3300); + graphics.lineStyle(4, 0xffd900, 1); + + // draw a shape + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + graphics.endFill(); + + graphics.lineStyle(2, 0xFF00FF, 1); + graphics.beginFill(0xFF00BB, 0.25); + graphics.drawRoundedRect(150, 450, 300, 100, 15); + graphics.endFill(); + + graphics.beginFill(); + graphics.lineStyle(4, 0x00ff00, 1); + + expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); + }); + + it('should do nothing when startAngle and endAngle are equal', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 0, 0); + + expect(graphics.currentPath).to.be.null; + }); + + it('should do nothing if sweep equals zero', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 10, 10); + + expect(graphics.currentPath).to.be.null; + }); + }); }); diff --git a/test/core/TextStyle.js b/test/core/TextStyle.js new file mode 100644 index 0000000..b5761ad --- /dev/null +++ b/test/core/TextStyle.js @@ -0,0 +1,26 @@ +'use strict'; + +describe('PIXI.TextStyle', function () +{ + it('reset reverts style to default', function () + { + const textStyle = new PIXI.TextStyle(); + const defaultFontSize = textStyle.fontSize; + + textStyle.fontSize = 1000; + + expect(textStyle.fontSize).to.equal(1000); + textStyle.reset(); + expect(textStyle.fontSize).to.equal(defaultFontSize); + }); + + it('should clone correctly', function () + { + const textStyle = new PIXI.TextStyle({ fontSize: 1000 }); + + const clonedTextStyle = textStyle.clone(); + + expect(textStyle.fontSize).to.equal(1000); + expect(clonedTextStyle.fontSize).to.equal(textStyle.fontSize); + }); +}); diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/test/core/Ellipse.js b/test/core/Ellipse.js new file mode 100644 index 0000000..f2e8234 --- /dev/null +++ b/test/core/Ellipse.js @@ -0,0 +1,71 @@ +'use strict'; + +describe('PIXI.Ellipse', function () +{ + it('should create a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(); + + expect(ellipse1.x).to.equal(0); + expect(ellipse1.y).to.equal(0); + expect(ellipse1.width).to.equal(0); + expect(ellipse1.height).to.equal(0); + + const ellipse2 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should clone a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.x).to.equal(10); + expect(ellipse1.y).to.equal(10); + expect(ellipse1.width).to.equal(5); + expect(ellipse1.height).to.equal(5); + + const ellipse2 = ellipse1.clone(); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should check if point is within ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.contains(10, 10)).to.be.true; + expect(ellipse1.contains(10, 15)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + expect(ellipse1.contains(5, 10)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + + expect(ellipse1.contains(6, 7)).to.be.true; + expect(ellipse1.contains(7, 6)).to.be.true; + expect(ellipse1.contains(7, 7)).to.be.true; + expect(ellipse1.contains(13, 14)).to.be.true; + expect(ellipse1.contains(14, 13)).to.be.true; + + expect(ellipse1.contains(14, 14)).to.be.false; + expect(ellipse1.contains(10, 16)).to.be.false; + expect(ellipse1.contains(11, 15)).to.be.false; + expect(ellipse1.contains(0, 0)).to.be.false; + }); + + it('should return framing rectangle', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + const rect1 = ellipse1.getBounds(); + + expect(rect1.left).to.equal(5); + expect(rect1.top).to.equal(5); + expect(rect1.right).to.equal(10); + expect(rect1.bottom).to.equal(10); + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index c7c7a45..0622cfc 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -128,4 +128,67 @@ expect(graphics.containsPoint(point)).to.be.false; }); }); + + describe('arc', () => + { + it('should draw an arc', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + expect(() => graphics.arc(100, 30, 20, 0, Math.PI)).to.not.throw(); + + expect(graphics.currentPath).to.be.not.null; + }); + + it('should not throw with other shapes', () => + { + // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) + const graphics = new PIXI.Graphics(); + + // set a fill and line style + graphics.beginFill(0xFF3300); + graphics.lineStyle(4, 0xffd900, 1); + + // draw a shape + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + graphics.endFill(); + + graphics.lineStyle(2, 0xFF00FF, 1); + graphics.beginFill(0xFF00BB, 0.25); + graphics.drawRoundedRect(150, 450, 300, 100, 15); + graphics.endFill(); + + graphics.beginFill(); + graphics.lineStyle(4, 0x00ff00, 1); + + expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); + }); + + it('should do nothing when startAngle and endAngle are equal', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 0, 0); + + expect(graphics.currentPath).to.be.null; + }); + + it('should do nothing if sweep equals zero', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 10, 10); + + expect(graphics.currentPath).to.be.null; + }); + }); }); diff --git a/test/core/TextStyle.js b/test/core/TextStyle.js new file mode 100644 index 0000000..b5761ad --- /dev/null +++ b/test/core/TextStyle.js @@ -0,0 +1,26 @@ +'use strict'; + +describe('PIXI.TextStyle', function () +{ + it('reset reverts style to default', function () + { + const textStyle = new PIXI.TextStyle(); + const defaultFontSize = textStyle.fontSize; + + textStyle.fontSize = 1000; + + expect(textStyle.fontSize).to.equal(1000); + textStyle.reset(); + expect(textStyle.fontSize).to.equal(defaultFontSize); + }); + + it('should clone correctly', function () + { + const textStyle = new PIXI.TextStyle({ fontSize: 1000 }); + + const clonedTextStyle = textStyle.clone(); + + expect(textStyle.fontSize).to.equal(1000); + expect(clonedTextStyle.fontSize).to.equal(textStyle.fontSize); + }); +}); diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js new file mode 100644 index 0000000..bb9607a --- /dev/null +++ b/test/core/TransformStatic.js @@ -0,0 +1,102 @@ +'use strict'; + +describe('PIXI.TransformStatic', () => +{ + describe('setFromMatrix', () => + { + it('should decompose negative scale into rotation', () => + { + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(20, 10); + transform.scale.set(-2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.equal(0); + expect(skew.y).to.equal(0); + expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); + }); + + it('should decompose mirror into skew', () => + { + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(20, 10); + transform.scale.set(2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); + expect(skew.y).to.be.closeTo(Math.PI / 6, eps); + expect(otherTransform.rotation).to.equal(0); + }); + + it('should apply skew before scale, like in adobe animate and spine', () => + { + // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy + + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(387.8, 313.95); + transform.scale.set(0.572, 4.101); + transform.skew.set(-0.873, 0.175); + transform.updateTransform(parent); + + const mat = transform.worldTransform; + + expect(mat.a).to.be.closeTo(0.563, eps); + expect(mat.b).to.be.closeTo(0.100, eps); + expect(mat.c).to.be.closeTo(-3.142, eps); + expect(mat.d).to.be.closeTo(2.635, eps); + expect(mat.tx).to.be.closeTo(387.8, eps); + expect(mat.ty).to.be.closeTo(313.95, eps); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(387.8, eps); + expect(position.y).to.be.closeTo(313.95, eps); + expect(scale.x).to.be.closeTo(0.572, eps); + expect(scale.y).to.be.closeTo(4.101, eps); + expect(skew.x).to.be.closeTo(-0.873, eps); + expect(skew.y).to.be.closeTo(0.175, eps); + expect(otherTransform.rotation).to.be.equal(0); + }); + }); +}); diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/test/core/Ellipse.js b/test/core/Ellipse.js new file mode 100644 index 0000000..f2e8234 --- /dev/null +++ b/test/core/Ellipse.js @@ -0,0 +1,71 @@ +'use strict'; + +describe('PIXI.Ellipse', function () +{ + it('should create a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(); + + expect(ellipse1.x).to.equal(0); + expect(ellipse1.y).to.equal(0); + expect(ellipse1.width).to.equal(0); + expect(ellipse1.height).to.equal(0); + + const ellipse2 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should clone a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.x).to.equal(10); + expect(ellipse1.y).to.equal(10); + expect(ellipse1.width).to.equal(5); + expect(ellipse1.height).to.equal(5); + + const ellipse2 = ellipse1.clone(); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should check if point is within ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.contains(10, 10)).to.be.true; + expect(ellipse1.contains(10, 15)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + expect(ellipse1.contains(5, 10)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + + expect(ellipse1.contains(6, 7)).to.be.true; + expect(ellipse1.contains(7, 6)).to.be.true; + expect(ellipse1.contains(7, 7)).to.be.true; + expect(ellipse1.contains(13, 14)).to.be.true; + expect(ellipse1.contains(14, 13)).to.be.true; + + expect(ellipse1.contains(14, 14)).to.be.false; + expect(ellipse1.contains(10, 16)).to.be.false; + expect(ellipse1.contains(11, 15)).to.be.false; + expect(ellipse1.contains(0, 0)).to.be.false; + }); + + it('should return framing rectangle', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + const rect1 = ellipse1.getBounds(); + + expect(rect1.left).to.equal(5); + expect(rect1.top).to.equal(5); + expect(rect1.right).to.equal(10); + expect(rect1.bottom).to.equal(10); + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index c7c7a45..0622cfc 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -128,4 +128,67 @@ expect(graphics.containsPoint(point)).to.be.false; }); }); + + describe('arc', () => + { + it('should draw an arc', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + expect(() => graphics.arc(100, 30, 20, 0, Math.PI)).to.not.throw(); + + expect(graphics.currentPath).to.be.not.null; + }); + + it('should not throw with other shapes', () => + { + // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) + const graphics = new PIXI.Graphics(); + + // set a fill and line style + graphics.beginFill(0xFF3300); + graphics.lineStyle(4, 0xffd900, 1); + + // draw a shape + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + graphics.endFill(); + + graphics.lineStyle(2, 0xFF00FF, 1); + graphics.beginFill(0xFF00BB, 0.25); + graphics.drawRoundedRect(150, 450, 300, 100, 15); + graphics.endFill(); + + graphics.beginFill(); + graphics.lineStyle(4, 0x00ff00, 1); + + expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); + }); + + it('should do nothing when startAngle and endAngle are equal', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 0, 0); + + expect(graphics.currentPath).to.be.null; + }); + + it('should do nothing if sweep equals zero', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 10, 10); + + expect(graphics.currentPath).to.be.null; + }); + }); }); diff --git a/test/core/TextStyle.js b/test/core/TextStyle.js new file mode 100644 index 0000000..b5761ad --- /dev/null +++ b/test/core/TextStyle.js @@ -0,0 +1,26 @@ +'use strict'; + +describe('PIXI.TextStyle', function () +{ + it('reset reverts style to default', function () + { + const textStyle = new PIXI.TextStyle(); + const defaultFontSize = textStyle.fontSize; + + textStyle.fontSize = 1000; + + expect(textStyle.fontSize).to.equal(1000); + textStyle.reset(); + expect(textStyle.fontSize).to.equal(defaultFontSize); + }); + + it('should clone correctly', function () + { + const textStyle = new PIXI.TextStyle({ fontSize: 1000 }); + + const clonedTextStyle = textStyle.clone(); + + expect(textStyle.fontSize).to.equal(1000); + expect(clonedTextStyle.fontSize).to.equal(textStyle.fontSize); + }); +}); diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js new file mode 100644 index 0000000..bb9607a --- /dev/null +++ b/test/core/TransformStatic.js @@ -0,0 +1,102 @@ +'use strict'; + +describe('PIXI.TransformStatic', () => +{ + describe('setFromMatrix', () => + { + it('should decompose negative scale into rotation', () => + { + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(20, 10); + transform.scale.set(-2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.equal(0); + expect(skew.y).to.equal(0); + expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); + }); + + it('should decompose mirror into skew', () => + { + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(20, 10); + transform.scale.set(2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); + expect(skew.y).to.be.closeTo(Math.PI / 6, eps); + expect(otherTransform.rotation).to.equal(0); + }); + + it('should apply skew before scale, like in adobe animate and spine', () => + { + // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy + + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(387.8, 313.95); + transform.scale.set(0.572, 4.101); + transform.skew.set(-0.873, 0.175); + transform.updateTransform(parent); + + const mat = transform.worldTransform; + + expect(mat.a).to.be.closeTo(0.563, eps); + expect(mat.b).to.be.closeTo(0.100, eps); + expect(mat.c).to.be.closeTo(-3.142, eps); + expect(mat.d).to.be.closeTo(2.635, eps); + expect(mat.tx).to.be.closeTo(387.8, eps); + expect(mat.ty).to.be.closeTo(313.95, eps); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(387.8, eps); + expect(position.y).to.be.closeTo(313.95, eps); + expect(scale.x).to.be.closeTo(0.572, eps); + expect(scale.y).to.be.closeTo(4.101, eps); + expect(skew.x).to.be.closeTo(-0.873, eps); + expect(skew.y).to.be.closeTo(0.175, eps); + expect(otherTransform.rotation).to.be.equal(0); + }); + }); +}); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index 5835b9f..d160a56 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -38,9 +38,7 @@ const graphics = new PIXI.Graphics(); - graphics.beginFill(0xFF0000).drawCircle(0, 0, 10);// texture); - - graphics.scale.set(2); + graphics.beginFill(0xFF0000).drawCircle(0, 0, 10); parent.addChild(graphics); @@ -52,11 +50,73 @@ expect(bounds.height).to.equal(20); }); + it('should register correct local-bounds with Graphics after clear', function () + { + const parent = new PIXI.Container(); + + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0xFF0000).drawRect(0, 0, 20, 20); + + parent.addChild(graphics); + + let bounds = graphics.getLocalBounds(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(20); + expect(bounds.height).to.equal(20); + + graphics.clear(); + graphics.beginFill(0xFF, 1); + graphics.drawRect(0, 0, 10, 10); + graphics.endFill(); + + bounds = graphics.getLocalBounds(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(10); + expect(bounds.height).to.equal(10); + }); + + it('should register correct local-bounds with Graphics after generateCanvasTexture and clear', function () + { + const parent = new PIXI.Container(); + + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0xFF0000).drawRect(0, 0, 20, 20); + + parent.addChild(graphics); + + let bounds = graphics.getLocalBounds(); + + graphics.generateCanvasTexture(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(20); + expect(bounds.height).to.equal(20); + + graphics.clear(); + graphics.beginFill(0xFF, 1); + graphics.drawRect(0, 0, 10, 10); + graphics.endFill(); + + bounds = graphics.getLocalBounds(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(10); + expect(bounds.height).to.equal(10); + }); + it('should register correct local-bounds with an empty Container', function () { const parent = new PIXI.Container(); - const container = new PIXI.Container();// Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); + const container = new PIXI.Container(); parent.addChild(container); @@ -72,9 +132,9 @@ { const parent = new PIXI.Container(); - const container = new PIXI.Container();// Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); + const container = new PIXI.Container(); - const graphics = new PIXI.Graphics().beginFill(0xFF0000).drawRect(0, 0, 10, 10);// texture); + const graphics = new PIXI.Graphics().beginFill(0xFF0000).drawRect(0, 0, 10, 10); parent.addChild(container); container.addChild(graphics); diff --git a/README.md b/README.md index b89e9fc..6af7251 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,6 @@ **Your support helps us make Pixi.js even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -[![gallery](http://www.pixijs.com/wp-content/uploads/2013/05/headerPanel_projects-898x342.jpg)](http://www.pixijs.com/gallery/) - ### What to Use Pixi.js for and When to Use It Pixi.js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. @@ -187,22 +185,22 @@ Then, to build the source, run: ``` -$> npm run build +$> npm run dist ``` -This will create a minified version at `bin/pixi.min.js` and a non-minified version at `bin/pixi.js` +This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` with all the plugins in the pixi.js project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: ``` -$> npm run build -- --exclude extras --exclude interaction +$> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: ``` -$> npm run build -- -e extras -e interaction -e filters +$> npm run dist -- -e extras -e interaction -e filters ``` ### How to generate the documentation ### diff --git a/bower.json b/bower.json index cf6f225..41b668c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "main": "bin/pixi.min.js", + "main": "dist/pixi.min.js", "ignore": [ "**/.*", "docs", diff --git a/package.json b/package.json index 16d63b9..dae5f9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.2.2", + "version": "4.2.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/core/const.js b/src/core/const.js index 6d09378..3425b41 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -4,6 +4,7 @@ * @static * @constant * @memberof PIXI + * @name VERSION * @type {string} */ export const VERSION = __VERSION__; @@ -44,6 +45,7 @@ * @static * @constant * @memberof PIXI + * @name RENDERER_TYPE * @type {object} * @property {number} UNKNOWN - Unknown render type. * @property {number} WEBGL - WebGL render type. @@ -64,6 +66,7 @@ * @static * @constant * @memberof PIXI + * @name BLEND_MODES * @type {object} * @property {number} NORMAL * @property {number} ADD @@ -110,6 +113,7 @@ * @static * @constant * @memberof PIXI + * @name DRAW_MODES * @type {object} * @property {number} POINTS * @property {number} LINES @@ -132,12 +136,13 @@ /** * The scale modes that are supported by pixi. * - * The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. + * The {@link PIXI.settings.SCALE_MODE} 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 * @memberof PIXI + * @name SCALE_MODES * @type {object} * @property {number} LINEAR Smooth scaling * @property {number} NEAREST Pixelating scaling @@ -150,7 +155,7 @@ /** * The wrap modes that are supported by pixi. * - * The PIXI.settings.WRAP_MODE wrap mode affects the default wraping mode of future operations. + * The {@link PIXI.settings.WRAP_MODE} wrap mode affects the default wraping mode of future operations. * It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. * If the texture is non power of two then clamp will be used regardless as webGL can * only use REPEAT if the texture is po2. @@ -159,6 +164,7 @@ * * @static * @constant + * @name WRAP_MODES * @memberof PIXI * @type {object} * @property {number} CLAMP - The textures uvs are clamped @@ -174,7 +180,7 @@ /** * The gc modes that are supported by pixi. * - * The PIXI.settings.GC_MODE Garbage Collection mode for pixi textures is AUTO + * The {@link PIXI.settings.GC_MODE} Garbage Collection mode for pixi textures is AUTO * If set to GC_MODE, the renderer will occasianally check textures usage. If they are not * used for a specified period of time they will be removed from the GPU. They will of course * be uploaded again when they are required. This is a silent behind the scenes process that @@ -185,6 +191,7 @@ * * @static * @constant + * @name GC_MODES * @memberof PIXI * @type {object} * @property {number} AUTO - Garbage collection will happen periodically automatically @@ -208,13 +215,14 @@ /** * Regexp for data URI. - * Based on: https://github.com/ragingwind/data-uri-regex + * Based on: {@link https://github.com/ragingwind/data-uri-regex} * * @static * @constant + * @name DATA_URI * @memberof PIXI * @type {RegExp|string} - * @example `data:image/png;base64` + * @example data:image/png;base64 */ export const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;(charset=[\w-]+|base64))?,(.*)/i; @@ -223,9 +231,10 @@ * * @static * @constant + * @name SVG_SIZE * @memberof PIXI * @type {RegExp|string} - * @example `` + * @example <svg width="100" height="100"></svg> */ export const SVG_SIZE = /]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*(?:\s(width|height)=('|")(\d*(?:\.\d+)?)(?:px)?('|"))[^>]*>/i; // eslint-disable-line max-len @@ -234,13 +243,14 @@ * * @static * @constant + * @name SHAPES * @memberof PIXI * @type {object} - * @property {number} POLY - * @property {number} RECT - * @property {number} CIRC - * @property {number} ELIP - * @property {number} RREC + * @property {number} POLY Polygon + * @property {number} RECT Rectangle + * @property {number} CIRC Circle + * @property {number} ELIP Ellipse + * @property {number} RREC Rounded Rectangle */ export const SHAPES = { POLY: 0, @@ -255,6 +265,7 @@ * * @static * @constant + * @name PRECISION * @memberof PIXI * @type {object} * @property {string} LOW='lowp' @@ -272,6 +283,7 @@ * * @static * @constant + * @name TRANSFORM_MODE * @memberof PIXI * @type {object} * @property {number} STATIC @@ -287,10 +299,11 @@ * * @static * @constant + * @name TEXT_GRADIENT * @memberof PIXI * @type {object} - * @property {number} LINEAR_VERTICAL - * @property {number} LINEAR_HORIZONTAL + * @property {number} LINEAR_VERTICAL Vertical gradient + * @property {number} LINEAR_HORIZONTAL Linear gradient */ export const TEXT_GRADIENT = { LINEAR_VERTICAL: 0, diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 8611925..0adae1b 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -54,25 +54,23 @@ */ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; } /** - * Updates the skew values when the skew changes. + * Updates the skew values when the skew or rotation changes. * * @private */ updateSkew() { - this._cy = Math.cos(this.skew.y); - this._sy = Math.sin(this.skew.y); - this._nsx = Math.sin(this.skew.x); - this._cx = Math.cos(this.skew.x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 } /** @@ -81,15 +79,14 @@ updateLocalTransform() { const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); } /** @@ -103,15 +100,10 @@ const wt = this.worldTransform; const lt = this.localTransform; - const a = this._cr * this.scale.x; - const b = this._sr * this.scale.x; - const c = -this._sr * this.scale.y; - const d = this._cr * this.scale.y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); @@ -156,7 +148,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); + this.updateSkew(); } } diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c0c2f33..1e8d0c6 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -47,12 +47,10 @@ this._rotation = 0; - this._sr = Math.sin(0); - this._cr = Math.cos(0); - this._cy = Math.cos(0);// skewY); - this._sy = Math.sin(0);// skewY); - this._nsx = Math.sin(0);// skewX); - this._cx = Math.cos(0);// skewX); + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; this._localID = 0; this._currentLocalID = 0; @@ -69,16 +67,16 @@ } /** - * Called when skew changes + * Called when skew or rotation changes * * @private */ updateSkew() { - this._cy = Math.cos(this.skew._y); - this._sy = Math.sin(this.skew._y); - this._nsx = Math.sin(this.skew._x); - this._cx = Math.cos(this.skew._x); + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 this._localID ++; } @@ -93,15 +91,10 @@ if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -119,22 +112,15 @@ */ updateTransform(parentTransform) { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; const lt = this.localTransform; if (this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - const a = this._cr * this.scale._x; - const b = this._sr * this.scale._x; - const c = -this._sr * this.scale._y; - const d = this._cr * this.scale._y; - - lt.a = (this._cy * a) + (this._sy * c); - lt.b = (this._cy * b) + (this._sy * d); - lt.c = (this._nsx * a) + (this._cx * c); - lt.d = (this._nsx * b) + (this._cx * d); + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); @@ -147,6 +133,9 @@ if (this._parentID !== parentTransform._worldID) { // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + wt.a = (lt.a * pt.a) + (lt.b * pt.c); wt.b = (lt.a * pt.b) + (lt.b * pt.d); wt.c = (lt.c * pt.a) + (lt.d * pt.c); @@ -191,8 +180,6 @@ set rotation(value) { this._rotation = value; - this._sr = Math.sin(value); - this._cr = Math.cos(value); - this._localID ++; + this.updateSkew(); } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 9e65938..6f0a417 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -491,9 +491,10 @@ const startX = cx + (Math.cos(startAngle) * radius); const startY = cy + (Math.sin(startAngle) * radius); - const points = this.currentPath.shape.points; + // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path. + let points = this.currentPath ? this.currentPath.shape.points : null; - if (this.currentPath) + if (points) { if (points[points.length - 2] !== startX || points[points.length - 1] !== startY) { @@ -503,6 +504,7 @@ else { this.moveTo(startX, startY); + points = this.currentPath.shape.points; } const theta = sweep / (segs * 2); @@ -691,6 +693,7 @@ this.lineWidth = 0; this.filling = false; + this.boundsDirty = -1; this.dirty++; this.clearDirty++; this.graphicsData.length = 0; diff --git a/src/core/index.js b/src/core/index.js index 3443149..93c0129 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -14,6 +14,7 @@ export { default as glCore } from 'pixi-gl-core'; +export { default as Bounds } from './display/Bounds'; export { default as DisplayObject } from './display/DisplayObject'; export { default as Container } from './display/Container'; export { default as Transform } from './display/Transform'; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index e3341fe..0b77477 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -353,10 +353,10 @@ const c = this.c; const d = this.d; - const skewX = Math.atan2(-c, d); + const skewX = -Math.atan2(-c, d); const skewY = Math.atan2(b, a); - const delta = Math.abs(1 - (skewX / skewY)); + const delta = Math.abs(skewX + skewY); if (delta < 0.00001) { diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 5e0a3ca..0f1c817 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -7,7 +7,6 @@ import EventEmitter from 'eventemitter3'; const tempMatrix = new Matrix(); -const { RESOLUTION, RENDER_OPTIONS } = settings; /** * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} @@ -47,17 +46,17 @@ // prepare options if (options) { - for (const i in RENDER_OPTIONS) + for (const i in settings.RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { - options[i] = RENDER_OPTIONS[i]; + options[i] = settings.RENDER_OPTIONS[i]; } } } else { - options = RENDER_OPTIONS; + options = settings.RENDER_OPTIONS; } /** @@ -98,7 +97,7 @@ * @member {number} * @default 1 */ - this.resolution = options.resolution || RESOLUTION; + this.resolution = options.resolution || settings.RESOLUTION; /** * Whether the render view is transparent diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index afe4a89..c4f34be 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -2,7 +2,7 @@ * Creates a little colored canvas * * @ignore - * @param {number} color - The color to make the canvas + * @param {string} color - The color to make the canvas * @return {canvas} a small canvas element */ function createColoredCanvas(color) diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 7047f2c..8a3be33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -1,8 +1,6 @@ import { GC_MODES } from '../../const'; import settings from '../../settings'; -const { GC_MODE, GC_MAX_IDLE, GC_MAX_CHECK_COUNT } = settings; - /** * TextureGarbageCollector. This class manages the GPU and ensures that it does not get clogged * up with textures that are no longer being used. @@ -21,9 +19,9 @@ this.count = 0; this.checkCount = 0; - this.maxIdle = GC_MAX_IDLE; - this.checkCountMax = GC_MAX_CHECK_COUNT; - this.mode = GC_MODE; + this.maxIdle = settings.GC_MAX_IDLE; + this.checkCountMax = settings.GC_MAX_CHECK_COUNT; + this.mode = settings.GC_MODE; } /** diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 1bfc4b6..afe51ab 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -3,8 +3,6 @@ import settings from '../../../settings'; import { GLFramebuffer } from 'pixi-gl-core'; -const { RESOLUTION, SCALE_MODE } = settings; - /** * @class * @memberof PIXI @@ -66,7 +64,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The projection matrix @@ -126,7 +124,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Whether this object is the root element or not diff --git a/src/core/settings.js b/src/core/settings.js index ac5df51..bb08cb0 100644 --- a/src/core/settings.js +++ b/src/core/settings.js @@ -119,7 +119,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.TRANSFORM_MODE} * @default PIXI.TRANSFORM_MODE.STATIC */ TRANSFORM_MODE: 0, @@ -129,7 +129,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.GC_MODES} * @default PIXI.GC_MODES.AUTO */ GC_MODE: 0, @@ -159,7 +159,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.WRAP_MODES} * @default PIXI.WRAP_MODES.CLAMP */ WRAP_MODE: 0, @@ -169,7 +169,7 @@ * * @static * @memberof PIXI.settings - * @type {number} + * @type {PIXI.SCALE_MODES} * @default PIXI.SCALE_MODES.LINEAR */ SCALE_MODE: 0, @@ -179,7 +179,7 @@ * * @static * @memberof PIXI.settings - * @type {string} + * @type {PIXI.PRECISION} * @default PIXI.PRECISION.MEDIUM */ PRECISION: 'mediump', diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index f39cab9..633c43f 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -8,8 +8,6 @@ import glCore from 'pixi-gl-core'; import bitTwiddle from 'bit-twiddle'; -const { SPRITE_BATCH_SIZE, SPRITE_MAX_TEXTURES, CAN_UPLOAD_SAME_BUFFER } = settings; - let TICK = 0; let TEXTURE_TICK = 0; @@ -50,7 +48,7 @@ * * @member {number} */ - this.size = SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + this.size = settings.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop // the total number of bytes in our batch // let numVerts = this.size * 4 * this.vertByteSize; @@ -106,7 +104,7 @@ const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), SPRITE_MAX_TEXTURES); + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); @@ -362,7 +360,7 @@ currentGroup.size = i - currentGroup.start; - if (!CAN_UPLOAD_SAME_BUFFER) + if (!settings.CAN_UPLOAD_SAME_BUFFER) { // this is still needed for IOS performance.. // it really does not like uploading to the same buffer in a single frame! @@ -435,7 +433,7 @@ { this.renderer._bindGLShader(this.shader); - if (CAN_UPLOAD_SAME_BUFFER) + if (settings.CAN_UPLOAD_SAME_BUFFER) { // bind buffer #0, we don't need others this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 7bdd125..4e94f6b 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -7,8 +7,6 @@ import settings from '../settings'; import TextStyle from './TextStyle'; -const { RESOLUTION } = settings; - const defaultDestroyOptions = { texture: true, children: false, @@ -67,7 +65,7 @@ * @member {number} * @default 1 */ - this.resolution = RESOLUTION; + this.resolution = settings.RESOLUTION; /** * Private tracker for the current text. @@ -501,7 +499,7 @@ * * @private * @param {object} style - The style. - * @param {string} lines - The lines of text. + * @param {string[]} lines - The lines of text. * @return {string|number|CanvasGradient} The fill style */ _generateFillStyle(style, lines) @@ -737,7 +735,7 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 20d4a0a..779de13 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -97,7 +97,7 @@ { const clonedProperties = {}; - for (const key in this._defaults) + for (const key in defaultStyle) { clonedProperties[key] = this[key]; } @@ -110,7 +110,7 @@ */ reset() { - Object.assign(this, this._defaults); + Object.assign(this, defaultStyle); } get align() diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index d83c447..676dca3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -7,8 +7,6 @@ import determineCrossOrigin from '../utils/determineCrossOrigin'; import bitTwiddle from 'bit-twiddle'; -const { RESOLUTION, MIPMAP_TEXTURES, SCALE_MODE, WRAP_MODE } = settings; - /** * A texture stores the information that represents an image. All textures have a base texture. * @@ -37,7 +35,7 @@ * @member {number} * @default 1 */ - this.resolution = resolution || RESOLUTION; + this.resolution = resolution || settings.RESOLUTION; /** * The width of the base texture set when the image has loaded @@ -79,7 +77,7 @@ * @default PIXI.settings.SCALE_MODE * @see PIXI.SCALE_MODES */ - this.scaleMode = scaleMode || SCALE_MODE; + this.scaleMode = scaleMode || settings.SCALE_MODE; /** * Set to true once the base texture has successfully loaded. @@ -176,7 +174,7 @@ * @member {boolean} * @see PIXI.MIPMAP_TEXTURES */ - this.mipmap = MIPMAP_TEXTURES; + this.mipmap = settings.MIPMAP_TEXTURES; /** * @@ -185,7 +183,7 @@ * @member {number} * @see PIXI.WRAP_MODES */ - this.wrapMode = WRAP_MODE; + this.wrapMode = settings.WRAP_MODE; /** * A map of renderer IDs to webgl textures diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 6aec195..d6b30e1 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -4,8 +4,6 @@ // Internal event used by composed emitter const TICK = 'tick'; -const { TARGET_FPMS } = settings; - /** * A Ticker class that runs an update loop that other objects listen to. * This class is composed around an EventEmitter object to add listeners @@ -73,7 +71,7 @@ * @member {number} * @default 1 / TARGET_FPMS */ - this.elapsedMS = 1 / TARGET_FPMS; // default to target frame time + this.elapsedMS = 1 / settings.TARGET_FPMS; // default to target frame time /** * The last time {@link PIXI.ticker.Ticker#update} was invoked. @@ -319,7 +317,7 @@ elapsedMS = this._maxElapsedMS; } - this.deltaTime = elapsedMS * TARGET_FPMS * this.speed; + this.deltaTime = elapsedMS * settings.TARGET_FPMS * this.speed; // Invoke listeners added to internal emitter this._emitter.emit(TICK, this.deltaTime); @@ -371,7 +369,7 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - const minFPMS = Math.min(Math.max(0, fps) / 1000, TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 94df60e..ca2b14d 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -735,8 +735,10 @@ rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) / this.resolution; - point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) / this.resolution; + const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution); + + point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier; + point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier; } /** diff --git a/src/loaders/loader.js b/src/loaders/loader.js index c086919..978aa2d 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -12,7 +12,9 @@ * //or * let loader = new PIXI.loaders.Loader(); // you can also create your own if you want * - * loader.add('bunny',"data/bunny.png"); + * loader.add('bunny', 'data/bunny.png'); + * loader.add('spaceship', 'assets/spritesheet.json'); + * loader.add('scoreFont', 'assets/score.fnt'); * * loader.once('complete',onAssetsLoaded); * diff --git a/test/core/Ellipse.js b/test/core/Ellipse.js new file mode 100644 index 0000000..f2e8234 --- /dev/null +++ b/test/core/Ellipse.js @@ -0,0 +1,71 @@ +'use strict'; + +describe('PIXI.Ellipse', function () +{ + it('should create a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(); + + expect(ellipse1.x).to.equal(0); + expect(ellipse1.y).to.equal(0); + expect(ellipse1.width).to.equal(0); + expect(ellipse1.height).to.equal(0); + + const ellipse2 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should clone a new ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.x).to.equal(10); + expect(ellipse1.y).to.equal(10); + expect(ellipse1.width).to.equal(5); + expect(ellipse1.height).to.equal(5); + + const ellipse2 = ellipse1.clone(); + + expect(ellipse2.x).to.equal(10); + expect(ellipse2.y).to.equal(10); + expect(ellipse2.width).to.equal(5); + expect(ellipse2.height).to.equal(5); + }); + + it('should check if point is within ellipse', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + + expect(ellipse1.contains(10, 10)).to.be.true; + expect(ellipse1.contains(10, 15)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + expect(ellipse1.contains(5, 10)).to.be.true; + expect(ellipse1.contains(15, 10)).to.be.true; + + expect(ellipse1.contains(6, 7)).to.be.true; + expect(ellipse1.contains(7, 6)).to.be.true; + expect(ellipse1.contains(7, 7)).to.be.true; + expect(ellipse1.contains(13, 14)).to.be.true; + expect(ellipse1.contains(14, 13)).to.be.true; + + expect(ellipse1.contains(14, 14)).to.be.false; + expect(ellipse1.contains(10, 16)).to.be.false; + expect(ellipse1.contains(11, 15)).to.be.false; + expect(ellipse1.contains(0, 0)).to.be.false; + }); + + it('should return framing rectangle', function () + { + const ellipse1 = new PIXI.Ellipse(10, 10, 5, 5); + const rect1 = ellipse1.getBounds(); + + expect(rect1.left).to.equal(5); + expect(rect1.top).to.equal(5); + expect(rect1.right).to.equal(10); + expect(rect1.bottom).to.equal(10); + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index c7c7a45..0622cfc 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -128,4 +128,67 @@ expect(graphics.containsPoint(point)).to.be.false; }); }); + + describe('arc', () => + { + it('should draw an arc', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + expect(() => graphics.arc(100, 30, 20, 0, Math.PI)).to.not.throw(); + + expect(graphics.currentPath).to.be.not.null; + }); + + it('should not throw with other shapes', () => + { + // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) + const graphics = new PIXI.Graphics(); + + // set a fill and line style + graphics.beginFill(0xFF3300); + graphics.lineStyle(4, 0xffd900, 1); + + // draw a shape + graphics.moveTo(50, 50); + graphics.lineTo(250, 50); + graphics.lineTo(100, 100); + graphics.lineTo(50, 50); + graphics.endFill(); + + graphics.lineStyle(2, 0xFF00FF, 1); + graphics.beginFill(0xFF00BB, 0.25); + graphics.drawRoundedRect(150, 450, 300, 100, 15); + graphics.endFill(); + + graphics.beginFill(); + graphics.lineStyle(4, 0x00ff00, 1); + + expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); + }); + + it('should do nothing when startAngle and endAngle are equal', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 0, 0); + + expect(graphics.currentPath).to.be.null; + }); + + it('should do nothing if sweep equals zero', () => + { + const graphics = new PIXI.Graphics(); + + expect(graphics.currentPath).to.be.null; + + graphics.arc(0, 0, 10, 10, 10); + + expect(graphics.currentPath).to.be.null; + }); + }); }); diff --git a/test/core/TextStyle.js b/test/core/TextStyle.js new file mode 100644 index 0000000..b5761ad --- /dev/null +++ b/test/core/TextStyle.js @@ -0,0 +1,26 @@ +'use strict'; + +describe('PIXI.TextStyle', function () +{ + it('reset reverts style to default', function () + { + const textStyle = new PIXI.TextStyle(); + const defaultFontSize = textStyle.fontSize; + + textStyle.fontSize = 1000; + + expect(textStyle.fontSize).to.equal(1000); + textStyle.reset(); + expect(textStyle.fontSize).to.equal(defaultFontSize); + }); + + it('should clone correctly', function () + { + const textStyle = new PIXI.TextStyle({ fontSize: 1000 }); + + const clonedTextStyle = textStyle.clone(); + + expect(textStyle.fontSize).to.equal(1000); + expect(clonedTextStyle.fontSize).to.equal(textStyle.fontSize); + }); +}); diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js new file mode 100644 index 0000000..bb9607a --- /dev/null +++ b/test/core/TransformStatic.js @@ -0,0 +1,102 @@ +'use strict'; + +describe('PIXI.TransformStatic', () => +{ + describe('setFromMatrix', () => + { + it('should decompose negative scale into rotation', () => + { + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(20, 10); + transform.scale.set(-2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.equal(0); + expect(skew.y).to.equal(0); + expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); + }); + + it('should decompose mirror into skew', () => + { + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(20, 10); + transform.scale.set(2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); + expect(skew.y).to.be.closeTo(Math.PI / 6, eps); + expect(otherTransform.rotation).to.equal(0); + }); + + it('should apply skew before scale, like in adobe animate and spine', () => + { + // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy + + const eps = 1e-3; + + const transform = new PIXI.TransformStatic(); + const parent = new PIXI.TransformStatic(); + const otherTransform = new PIXI.TransformStatic(); + + transform.position.set(387.8, 313.95); + transform.scale.set(0.572, 4.101); + transform.skew.set(-0.873, 0.175); + transform.updateTransform(parent); + + const mat = transform.worldTransform; + + expect(mat.a).to.be.closeTo(0.563, eps); + expect(mat.b).to.be.closeTo(0.100, eps); + expect(mat.c).to.be.closeTo(-3.142, eps); + expect(mat.d).to.be.closeTo(2.635, eps); + expect(mat.tx).to.be.closeTo(387.8, eps); + expect(mat.ty).to.be.closeTo(313.95, eps); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(387.8, eps); + expect(position.y).to.be.closeTo(313.95, eps); + expect(scale.x).to.be.closeTo(0.572, eps); + expect(scale.y).to.be.closeTo(4.101, eps); + expect(skew.x).to.be.closeTo(-0.873, eps); + expect(skew.y).to.be.closeTo(0.175, eps); + expect(otherTransform.rotation).to.be.equal(0); + }); + }); +}); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index 5835b9f..d160a56 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -38,9 +38,7 @@ const graphics = new PIXI.Graphics(); - graphics.beginFill(0xFF0000).drawCircle(0, 0, 10);// texture); - - graphics.scale.set(2); + graphics.beginFill(0xFF0000).drawCircle(0, 0, 10); parent.addChild(graphics); @@ -52,11 +50,73 @@ expect(bounds.height).to.equal(20); }); + it('should register correct local-bounds with Graphics after clear', function () + { + const parent = new PIXI.Container(); + + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0xFF0000).drawRect(0, 0, 20, 20); + + parent.addChild(graphics); + + let bounds = graphics.getLocalBounds(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(20); + expect(bounds.height).to.equal(20); + + graphics.clear(); + graphics.beginFill(0xFF, 1); + graphics.drawRect(0, 0, 10, 10); + graphics.endFill(); + + bounds = graphics.getLocalBounds(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(10); + expect(bounds.height).to.equal(10); + }); + + it('should register correct local-bounds with Graphics after generateCanvasTexture and clear', function () + { + const parent = new PIXI.Container(); + + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0xFF0000).drawRect(0, 0, 20, 20); + + parent.addChild(graphics); + + let bounds = graphics.getLocalBounds(); + + graphics.generateCanvasTexture(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(20); + expect(bounds.height).to.equal(20); + + graphics.clear(); + graphics.beginFill(0xFF, 1); + graphics.drawRect(0, 0, 10, 10); + graphics.endFill(); + + bounds = graphics.getLocalBounds(); + + expect(bounds.x).to.equal(0); + expect(bounds.y).to.equal(0); + expect(bounds.width).to.equal(10); + expect(bounds.height).to.equal(10); + }); + it('should register correct local-bounds with an empty Container', function () { const parent = new PIXI.Container(); - const container = new PIXI.Container();// Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); + const container = new PIXI.Container(); parent.addChild(container); @@ -72,9 +132,9 @@ { const parent = new PIXI.Container(); - const container = new PIXI.Container();// Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); + const container = new PIXI.Container(); - const graphics = new PIXI.Graphics().beginFill(0xFF0000).drawRect(0, 0, 10, 10);// texture); + const graphics = new PIXI.Graphics().beginFill(0xFF0000).drawRect(0, 0, 10, 10); parent.addChild(container); container.addChild(graphics); diff --git a/test/core/index.js b/test/core/index.js index a060dde..405a557 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -1,11 +1,13 @@ 'use strict'; +require('./TransformStatic'); require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./getLocalBounds'); require('./Sprite'); require('./TilingSprite'); +require('./TextStyle'); require('./Text'); require('./toGlobal'); require('./toLocal'); @@ -20,3 +22,4 @@ require('./Circle'); require('./Graphics'); require('./SpriteRenderer'); +require('./Ellipse');