diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.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 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 71f4355..40ca3b0 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -67,25 +67,6 @@ expect(rect2.contains(21, 21)).to.be.false; }); - it('should make rectangle grow', function () - { - const rect = new PIXI.Rectangle(10, 10, 10, 10); - - rect.pad(1, 1); - - expect(rect.left).to.equal(9); - expect(rect.top).to.equal(9); - expect(rect.right).to.equal(21); - expect(rect.bottom).to.equal(21); - - rect.pad(10, 10); - - expect(rect.left).to.equal(-1); - expect(rect.top).to.equal(-1); - expect(rect.right).to.equal(31); - expect(rect.bottom).to.equal(31); - }); - it('should enlarge rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -97,5 +78,91 @@ expect(rect1.top).to.equal(10); expect(rect1.right).to.equal(25); expect(rect1.bottom).to.equal(25); + + const rect3 = new PIXI.Rectangle(0, 0, 0, 0); + const rect4 = new PIXI.Rectangle(10, 10, 10, 10); + + rect4.enlarge(rect3); + + expect(rect4.left).to.equal(0); + expect(rect4.top).to.equal(0); + expect(rect4.right).to.equal(20); + expect(rect4.bottom).to.equal(20); + }); + + it('should pad a rectangle', function () + { + // Pad with X & Y + const rect = new PIXI.Rectangle(10, 10, 10, 10); + + rect.pad(10, 10); + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(30); + expect(rect.bottom).to.equal(30); + + // Pad with X + const rect1 = new PIXI.Rectangle(10, 10, 10, 10); + + rect1.pad(10); + + expect(rect1.left).to.equal(0); + expect(rect1.top).to.equal(0); + expect(rect1.right).to.equal(30); + expect(rect1.bottom).to.equal(30); + + // Pad with nothing + const rect2 = new PIXI.Rectangle(10, 10, 10, 10); + + rect2.pad(); + + expect(rect2.left).to.equal(10); + expect(rect2.top).to.equal(10); + expect(rect2.right).to.equal(20); + expect(rect2.bottom).to.equal(20); + + // Pad with Y + const rect3 = new PIXI.Rectangle(10, 10, 10, 10); + + rect3.pad(null, 10); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(20); + expect(rect3.bottom).to.equal(30); + }); + + it('should fit a rectangle', function () + { + const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); + + rect2.fit(rect1); + + expect(rect2.left).to.equal(0); + expect(rect2.top).to.equal(0); + expect(rect2.right).to.equal(0); + expect(rect2.bottom).to.equal(0); + + const rect3 = new PIXI.Rectangle(0, 0, 20, 20); + const rect4 = new PIXI.Rectangle(10, 0, 20, 20); + + rect3.fit(rect4); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(30); + expect(rect3.bottom).to.equal(20); + }); + + it('should generate an empty rectangle', function () + { + const rect = PIXI.Rectangle.EMPTY; + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(0); + expect(rect.bottom).to.equal(0); }); }); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 71f4355..40ca3b0 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -67,25 +67,6 @@ expect(rect2.contains(21, 21)).to.be.false; }); - it('should make rectangle grow', function () - { - const rect = new PIXI.Rectangle(10, 10, 10, 10); - - rect.pad(1, 1); - - expect(rect.left).to.equal(9); - expect(rect.top).to.equal(9); - expect(rect.right).to.equal(21); - expect(rect.bottom).to.equal(21); - - rect.pad(10, 10); - - expect(rect.left).to.equal(-1); - expect(rect.top).to.equal(-1); - expect(rect.right).to.equal(31); - expect(rect.bottom).to.equal(31); - }); - it('should enlarge rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -97,5 +78,91 @@ expect(rect1.top).to.equal(10); expect(rect1.right).to.equal(25); expect(rect1.bottom).to.equal(25); + + const rect3 = new PIXI.Rectangle(0, 0, 0, 0); + const rect4 = new PIXI.Rectangle(10, 10, 10, 10); + + rect4.enlarge(rect3); + + expect(rect4.left).to.equal(0); + expect(rect4.top).to.equal(0); + expect(rect4.right).to.equal(20); + expect(rect4.bottom).to.equal(20); + }); + + it('should pad a rectangle', function () + { + // Pad with X & Y + const rect = new PIXI.Rectangle(10, 10, 10, 10); + + rect.pad(10, 10); + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(30); + expect(rect.bottom).to.equal(30); + + // Pad with X + const rect1 = new PIXI.Rectangle(10, 10, 10, 10); + + rect1.pad(10); + + expect(rect1.left).to.equal(0); + expect(rect1.top).to.equal(0); + expect(rect1.right).to.equal(30); + expect(rect1.bottom).to.equal(30); + + // Pad with nothing + const rect2 = new PIXI.Rectangle(10, 10, 10, 10); + + rect2.pad(); + + expect(rect2.left).to.equal(10); + expect(rect2.top).to.equal(10); + expect(rect2.right).to.equal(20); + expect(rect2.bottom).to.equal(20); + + // Pad with Y + const rect3 = new PIXI.Rectangle(10, 10, 10, 10); + + rect3.pad(null, 10); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(20); + expect(rect3.bottom).to.equal(30); + }); + + it('should fit a rectangle', function () + { + const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); + + rect2.fit(rect1); + + expect(rect2.left).to.equal(0); + expect(rect2.top).to.equal(0); + expect(rect2.right).to.equal(0); + expect(rect2.bottom).to.equal(0); + + const rect3 = new PIXI.Rectangle(0, 0, 20, 20); + const rect4 = new PIXI.Rectangle(10, 0, 20, 20); + + rect3.fit(rect4); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(30); + expect(rect3.bottom).to.equal(20); + }); + + it('should generate an empty rectangle', function () + { + const rect = PIXI.Rectangle.EMPTY; + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(0); + expect(rect.bottom).to.equal(0); }); }); diff --git a/test/core/SpriteRenderer.js b/test/core/SpriteRenderer.js index 01e1f81..bfab7db 100644 --- a/test/core/SpriteRenderer.js +++ b/test/core/SpriteRenderer.js @@ -1,8 +1,8 @@ 'use strict'; -describe('SpriteRenderer', () => +describe('SpriteRenderer', function () { - it('can be destroyed', () => + it('can be destroyed', function () { const destroyable = { destroy: sinon.stub() }; const webgl = { @@ -20,7 +20,7 @@ expect(() => renderer.destroy()).to.not.throw(); }); - it('can be destroyed immediately', () => + it('can be destroyed immediately', function () { const webgl = { on: sinon.stub(), diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 71f4355..40ca3b0 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -67,25 +67,6 @@ expect(rect2.contains(21, 21)).to.be.false; }); - it('should make rectangle grow', function () - { - const rect = new PIXI.Rectangle(10, 10, 10, 10); - - rect.pad(1, 1); - - expect(rect.left).to.equal(9); - expect(rect.top).to.equal(9); - expect(rect.right).to.equal(21); - expect(rect.bottom).to.equal(21); - - rect.pad(10, 10); - - expect(rect.left).to.equal(-1); - expect(rect.top).to.equal(-1); - expect(rect.right).to.equal(31); - expect(rect.bottom).to.equal(31); - }); - it('should enlarge rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -97,5 +78,91 @@ expect(rect1.top).to.equal(10); expect(rect1.right).to.equal(25); expect(rect1.bottom).to.equal(25); + + const rect3 = new PIXI.Rectangle(0, 0, 0, 0); + const rect4 = new PIXI.Rectangle(10, 10, 10, 10); + + rect4.enlarge(rect3); + + expect(rect4.left).to.equal(0); + expect(rect4.top).to.equal(0); + expect(rect4.right).to.equal(20); + expect(rect4.bottom).to.equal(20); + }); + + it('should pad a rectangle', function () + { + // Pad with X & Y + const rect = new PIXI.Rectangle(10, 10, 10, 10); + + rect.pad(10, 10); + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(30); + expect(rect.bottom).to.equal(30); + + // Pad with X + const rect1 = new PIXI.Rectangle(10, 10, 10, 10); + + rect1.pad(10); + + expect(rect1.left).to.equal(0); + expect(rect1.top).to.equal(0); + expect(rect1.right).to.equal(30); + expect(rect1.bottom).to.equal(30); + + // Pad with nothing + const rect2 = new PIXI.Rectangle(10, 10, 10, 10); + + rect2.pad(); + + expect(rect2.left).to.equal(10); + expect(rect2.top).to.equal(10); + expect(rect2.right).to.equal(20); + expect(rect2.bottom).to.equal(20); + + // Pad with Y + const rect3 = new PIXI.Rectangle(10, 10, 10, 10); + + rect3.pad(null, 10); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(20); + expect(rect3.bottom).to.equal(30); + }); + + it('should fit a rectangle', function () + { + const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); + + rect2.fit(rect1); + + expect(rect2.left).to.equal(0); + expect(rect2.top).to.equal(0); + expect(rect2.right).to.equal(0); + expect(rect2.bottom).to.equal(0); + + const rect3 = new PIXI.Rectangle(0, 0, 20, 20); + const rect4 = new PIXI.Rectangle(10, 0, 20, 20); + + rect3.fit(rect4); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(30); + expect(rect3.bottom).to.equal(20); + }); + + it('should generate an empty rectangle', function () + { + const rect = PIXI.Rectangle.EMPTY; + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(0); + expect(rect.bottom).to.equal(0); }); }); diff --git a/test/core/SpriteRenderer.js b/test/core/SpriteRenderer.js index 01e1f81..bfab7db 100644 --- a/test/core/SpriteRenderer.js +++ b/test/core/SpriteRenderer.js @@ -1,8 +1,8 @@ 'use strict'; -describe('SpriteRenderer', () => +describe('SpriteRenderer', function () { - it('can be destroyed', () => + it('can be destroyed', function () { const destroyable = { destroy: sinon.stub() }; const webgl = { @@ -20,7 +20,7 @@ expect(() => renderer.destroy()).to.not.throw(); }); - it('can be destroyed immediately', () => + it('can be destroyed immediately', function () { const webgl = { on: sinon.stub(), diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js index bb9607a..e6443a9 100644 --- a/test/core/TransformStatic.js +++ b/test/core/TransformStatic.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.TransformStatic', () => +describe('PIXI.TransformStatic', function () { - describe('setFromMatrix', () => + describe('setFromMatrix', function () { - it('should decompose negative scale into rotation', () => + it('should decompose negative scale into rotation', function () { const eps = 1e-3; @@ -32,7 +32,7 @@ expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); }); - it('should decompose mirror into skew', () => + it('should decompose mirror into skew', function () { const eps = 1e-3; @@ -60,7 +60,7 @@ expect(otherTransform.rotation).to.equal(0); }); - it('should apply skew before scale, like in adobe animate and spine', () => + it('should apply skew before scale, like in adobe animate and spine', function () { // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 71f4355..40ca3b0 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -67,25 +67,6 @@ expect(rect2.contains(21, 21)).to.be.false; }); - it('should make rectangle grow', function () - { - const rect = new PIXI.Rectangle(10, 10, 10, 10); - - rect.pad(1, 1); - - expect(rect.left).to.equal(9); - expect(rect.top).to.equal(9); - expect(rect.right).to.equal(21); - expect(rect.bottom).to.equal(21); - - rect.pad(10, 10); - - expect(rect.left).to.equal(-1); - expect(rect.top).to.equal(-1); - expect(rect.right).to.equal(31); - expect(rect.bottom).to.equal(31); - }); - it('should enlarge rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -97,5 +78,91 @@ expect(rect1.top).to.equal(10); expect(rect1.right).to.equal(25); expect(rect1.bottom).to.equal(25); + + const rect3 = new PIXI.Rectangle(0, 0, 0, 0); + const rect4 = new PIXI.Rectangle(10, 10, 10, 10); + + rect4.enlarge(rect3); + + expect(rect4.left).to.equal(0); + expect(rect4.top).to.equal(0); + expect(rect4.right).to.equal(20); + expect(rect4.bottom).to.equal(20); + }); + + it('should pad a rectangle', function () + { + // Pad with X & Y + const rect = new PIXI.Rectangle(10, 10, 10, 10); + + rect.pad(10, 10); + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(30); + expect(rect.bottom).to.equal(30); + + // Pad with X + const rect1 = new PIXI.Rectangle(10, 10, 10, 10); + + rect1.pad(10); + + expect(rect1.left).to.equal(0); + expect(rect1.top).to.equal(0); + expect(rect1.right).to.equal(30); + expect(rect1.bottom).to.equal(30); + + // Pad with nothing + const rect2 = new PIXI.Rectangle(10, 10, 10, 10); + + rect2.pad(); + + expect(rect2.left).to.equal(10); + expect(rect2.top).to.equal(10); + expect(rect2.right).to.equal(20); + expect(rect2.bottom).to.equal(20); + + // Pad with Y + const rect3 = new PIXI.Rectangle(10, 10, 10, 10); + + rect3.pad(null, 10); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(20); + expect(rect3.bottom).to.equal(30); + }); + + it('should fit a rectangle', function () + { + const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); + + rect2.fit(rect1); + + expect(rect2.left).to.equal(0); + expect(rect2.top).to.equal(0); + expect(rect2.right).to.equal(0); + expect(rect2.bottom).to.equal(0); + + const rect3 = new PIXI.Rectangle(0, 0, 20, 20); + const rect4 = new PIXI.Rectangle(10, 0, 20, 20); + + rect3.fit(rect4); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(30); + expect(rect3.bottom).to.equal(20); + }); + + it('should generate an empty rectangle', function () + { + const rect = PIXI.Rectangle.EMPTY; + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(0); + expect(rect.bottom).to.equal(0); }); }); diff --git a/test/core/SpriteRenderer.js b/test/core/SpriteRenderer.js index 01e1f81..bfab7db 100644 --- a/test/core/SpriteRenderer.js +++ b/test/core/SpriteRenderer.js @@ -1,8 +1,8 @@ 'use strict'; -describe('SpriteRenderer', () => +describe('SpriteRenderer', function () { - it('can be destroyed', () => + it('can be destroyed', function () { const destroyable = { destroy: sinon.stub() }; const webgl = { @@ -20,7 +20,7 @@ expect(() => renderer.destroy()).to.not.throw(); }); - it('can be destroyed immediately', () => + it('can be destroyed immediately', function () { const webgl = { on: sinon.stub(), diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js index bb9607a..e6443a9 100644 --- a/test/core/TransformStatic.js +++ b/test/core/TransformStatic.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.TransformStatic', () => +describe('PIXI.TransformStatic', function () { - describe('setFromMatrix', () => + describe('setFromMatrix', function () { - it('should decompose negative scale into rotation', () => + it('should decompose negative scale into rotation', function () { const eps = 1e-3; @@ -32,7 +32,7 @@ expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); }); - it('should decompose mirror into skew', () => + it('should decompose mirror into skew', function () { const eps = 1e-3; @@ -60,7 +60,7 @@ expect(otherTransform.rotation).to.equal(0); }); - it('should apply skew before scale, like in adobe animate and spine', () => + it('should apply skew before scale, like in adobe animate and spine', function () { // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy diff --git a/test/core/index.js b/test/core/index.js index 405a557..2a056a2 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -1,5 +1,6 @@ 'use strict'; +require('./Application'); require('./TransformStatic'); require('./Bounds'); require('./Container'); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 71f4355..40ca3b0 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -67,25 +67,6 @@ expect(rect2.contains(21, 21)).to.be.false; }); - it('should make rectangle grow', function () - { - const rect = new PIXI.Rectangle(10, 10, 10, 10); - - rect.pad(1, 1); - - expect(rect.left).to.equal(9); - expect(rect.top).to.equal(9); - expect(rect.right).to.equal(21); - expect(rect.bottom).to.equal(21); - - rect.pad(10, 10); - - expect(rect.left).to.equal(-1); - expect(rect.top).to.equal(-1); - expect(rect.right).to.equal(31); - expect(rect.bottom).to.equal(31); - }); - it('should enlarge rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -97,5 +78,91 @@ expect(rect1.top).to.equal(10); expect(rect1.right).to.equal(25); expect(rect1.bottom).to.equal(25); + + const rect3 = new PIXI.Rectangle(0, 0, 0, 0); + const rect4 = new PIXI.Rectangle(10, 10, 10, 10); + + rect4.enlarge(rect3); + + expect(rect4.left).to.equal(0); + expect(rect4.top).to.equal(0); + expect(rect4.right).to.equal(20); + expect(rect4.bottom).to.equal(20); + }); + + it('should pad a rectangle', function () + { + // Pad with X & Y + const rect = new PIXI.Rectangle(10, 10, 10, 10); + + rect.pad(10, 10); + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(30); + expect(rect.bottom).to.equal(30); + + // Pad with X + const rect1 = new PIXI.Rectangle(10, 10, 10, 10); + + rect1.pad(10); + + expect(rect1.left).to.equal(0); + expect(rect1.top).to.equal(0); + expect(rect1.right).to.equal(30); + expect(rect1.bottom).to.equal(30); + + // Pad with nothing + const rect2 = new PIXI.Rectangle(10, 10, 10, 10); + + rect2.pad(); + + expect(rect2.left).to.equal(10); + expect(rect2.top).to.equal(10); + expect(rect2.right).to.equal(20); + expect(rect2.bottom).to.equal(20); + + // Pad with Y + const rect3 = new PIXI.Rectangle(10, 10, 10, 10); + + rect3.pad(null, 10); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(20); + expect(rect3.bottom).to.equal(30); + }); + + it('should fit a rectangle', function () + { + const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); + + rect2.fit(rect1); + + expect(rect2.left).to.equal(0); + expect(rect2.top).to.equal(0); + expect(rect2.right).to.equal(0); + expect(rect2.bottom).to.equal(0); + + const rect3 = new PIXI.Rectangle(0, 0, 20, 20); + const rect4 = new PIXI.Rectangle(10, 0, 20, 20); + + rect3.fit(rect4); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(30); + expect(rect3.bottom).to.equal(20); + }); + + it('should generate an empty rectangle', function () + { + const rect = PIXI.Rectangle.EMPTY; + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(0); + expect(rect.bottom).to.equal(0); }); }); diff --git a/test/core/SpriteRenderer.js b/test/core/SpriteRenderer.js index 01e1f81..bfab7db 100644 --- a/test/core/SpriteRenderer.js +++ b/test/core/SpriteRenderer.js @@ -1,8 +1,8 @@ 'use strict'; -describe('SpriteRenderer', () => +describe('SpriteRenderer', function () { - it('can be destroyed', () => + it('can be destroyed', function () { const destroyable = { destroy: sinon.stub() }; const webgl = { @@ -20,7 +20,7 @@ expect(() => renderer.destroy()).to.not.throw(); }); - it('can be destroyed immediately', () => + it('can be destroyed immediately', function () { const webgl = { on: sinon.stub(), diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js index bb9607a..e6443a9 100644 --- a/test/core/TransformStatic.js +++ b/test/core/TransformStatic.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.TransformStatic', () => +describe('PIXI.TransformStatic', function () { - describe('setFromMatrix', () => + describe('setFromMatrix', function () { - it('should decompose negative scale into rotation', () => + it('should decompose negative scale into rotation', function () { const eps = 1e-3; @@ -32,7 +32,7 @@ expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); }); - it('should decompose mirror into skew', () => + it('should decompose mirror into skew', function () { const eps = 1e-3; @@ -60,7 +60,7 @@ expect(otherTransform.rotation).to.equal(0); }); - it('should apply skew before scale, like in adobe animate and spine', () => + it('should apply skew before scale, like in adobe animate and spine', function () { // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy diff --git a/test/core/index.js b/test/core/index.js index 405a557..2a056a2 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -1,5 +1,6 @@ 'use strict'; +require('./Application'); require('./TransformStatic'); require('./Bounds'); require('./Container'); diff --git a/test/core/util.js b/test/core/util.js index e851c90..dce6003 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -96,7 +96,7 @@ describe('getUrlFileExtension', function () { - it('should exist', () => + it('should exist', function () { expect(PIXI.utils.getUrlFileExtension) .to.be.a('function'); diff --git a/README.md b/README.md index 6af7251..d26fadd 100644 --- a/README.md +++ b/README.md @@ -125,48 +125,38 @@ ### Basic Usage Example ### ```js -// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` -// which will try to choose the best renderer for the environment you are in. -var renderer = new PIXI.WebGLRenderer(800, 600); +// The application will create a renderer using WebGL, if possible, +// with a fallback to a canvas render. It will also setup the ticker +// and the root stage PIXI.Container. +var app = new PIXI.Application(); -// The renderer will create a canvas element for you that you can then insert into the DOM. -document.body.appendChild(renderer.view); - -// You need to create a root container that will hold the scene you want to draw. -var stage = new PIXI.Container(); - -// Declare a global variable for our sprite so that the animate function can access it. -var bunny = null; +// The application will create a canvas element for you that you +// can then insert into the DOM. +document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function (loader, resources) { +PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { + // This creates a texture from a 'bunny.png' image. - bunny = new PIXI.Sprite(resources.bunny.texture); + var bunny = new PIXI.Sprite(resources.bunny.texture); - // Setup the position and scale of the bunny - bunny.position.x = 400; - bunny.position.y = 300; + // Setup the position of the bunny + bunny.x = app.renderer.width / 2; + bunny.y = app.renderer.height / 2; - bunny.scale.x = 2; - bunny.scale.y = 2; + // Rotate around the center + bunny.anchor.x = 0.5; + bunny.anchor.y = 0.5; // Add the bunny to the scene we are building. - stage.addChild(bunny); - - // kick off the animation loop (defined below) - animate(); + app.stage.addChild(bunny); + + // Listen for frame updates + app.ticker.add(function() { + // each frame we spin the bunny around a bit + bunny.rotation += 0.01; + }); }); - -function animate() { - // start the timer for the next animation loop - requestAnimationFrame(animate); - - // each frame we spin the bunny around a bit - bunny.rotation += 0.01; - - // this is the main render call that makes pixi draw your container and its children. - renderer.render(stage); -} ``` ### How to build ### diff --git a/package.json b/package.json index 27fbfcb..f412af6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixi.js", - "version": "4.3.2", + "version": "4.3.3", "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", "author": "Mat Groves", "contributors": [ diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 9b1a465..df2716a 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -28,8 +28,10 @@ * Much like interaction any DisplayObject can be made accessible. This manager will map the * events as if the mouse was being used, minimizing the efferot required to implement. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.accessibility + * * @class - * @memberof PIXI + * @memberof PIXI.accessibility */ export default class AccessibilityManager { diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index d79575e..4cda116 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -2,9 +2,8 @@ * Default property values of accessible objects * used by {@link PIXI.accessibility.AccessibilityManager}. * - * @mixin - * @name accessibleTarget - * @memberof PIXI + * @function accessibleTarget + * @memberof PIXI.accessibility * @example * function MyObject() {} * diff --git a/src/accessibility/index.js b/src/accessibility/index.js index c9c8718..568cfb1 100644 --- a/src/accessibility/index.js +++ b/src/accessibility/index.js @@ -1,5 +1,5 @@ /** - * @namespace PIXI.AccessibilityManager + * @namespace PIXI.accessibility */ export { default as accessibleTarget } from './accessibleTarget'; export { default as AccessibilityManager } from './AccessibilityManager'; diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..bc730db --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,113 @@ +import { autoDetectRenderer } from './autoDetectRenderer'; +import Container from './display/Container'; +import Ticker from './ticker/Ticker'; + +/** + * Convenience class to create a new PIXI application. + * This class automatically creates the renderer, ticker + * and root container. + * + * @example + * // Create the application + * const app = new PIXI.Application(); + * + * // Add the view to the DOM + * document.body.appendChild(app.view); + * + * // ex, add display objects + * app.stage.addChild(PIXI.Sprite.fromImage('something.png')); + * + * @class + * @memberof PIXI + */ +export default class Application +{ + /** + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + */ + constructor(width, height, options, noWebGL) + { + /** + * WebGL renderer if available, otherwise CanvasRenderer + * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} + */ + this.renderer = autoDetectRenderer(width, height, options, noWebGL); + + /** + * The root display container that's renderered. + * @member {PIXI.Container} + */ + this.stage = new Container(); + + /** + * Ticker for doing render updates. + * @member {PIXI.ticker.Ticker} + */ + this.ticker = new Ticker(); + + this.ticker.add(this.render, this); + + // Start the rendering + this.start(); + } + + /** + * Render the current stage. + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * Convenience method for stopping the render. + */ + stop() + { + this.ticker.stop(); + } + + /** + * Convenience method for starting the render. + */ + start() + { + this.ticker.start(); + } + + /** + * Reference to the renderer's canvas element. + * @member {HTMLCanvasElement} + * @readonly + */ + get view() + { + return this.renderer.view; + } + + /** + * Destroy and don't use after this. + * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. + */ + destroy(removeView) + { + this.stop(); + this.ticker.remove(this.render, this); + this.ticker = null; + + this.stage.destroy(); + this.stage = null; + + this.renderer.destroy(removeView); + this.renderer = null; + } +} diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js new file mode 100644 index 0000000..8960425 --- /dev/null +++ b/src/core/autoDetectRenderer.js @@ -0,0 +1,32 @@ +import * as utils from './utils'; +import CanvasRenderer from './renderers/canvas/CanvasRenderer'; +import WebGLRenderer from './renderers/webgl/WebGLRenderer'; + +/** + * This helper function will automatically detect which renderer you should be using. + * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by + * the browser then this function will return a canvas renderer + * + * @memberof PIXI + * @function autoDetectRenderer + * @param {number} [width=800] - the width of the renderers view + * @param {number} [height=600] - the height of the renderers view + * @param {object} [options] - The optional renderer parameters + * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional + * @param {boolean} [options.transparent=false] - If the render view is transparent, default false + * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) +{ + if (!noWebGL && utils.isWebGLSupported()) + { + return new WebGLRenderer(width, height, options); + } + + return new CanvasRenderer(width, height, options); +} diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 3adcdd2..b3792ef 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -296,8 +296,6 @@ /** * Updates the transform on all children of this container for rendering - * - * @private */ updateTransform() { @@ -523,6 +521,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { @@ -545,19 +547,13 @@ * The width of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get width() { return this.scale.x * this.getLocalBounds().width; } - /** - * Sets the width of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const width = this.getLocalBounds().width; @@ -577,19 +573,13 @@ * The height of the Container, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Container# */ get height() { return this.scale.y * this.getLocalBounds().height; } - /** - * Sets the height of the container by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const height = this.getLocalBounds().height; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index cf9e5e2..3affe36 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -410,19 +410,13 @@ * An alias to position.x * * @member {number} - * @memberof PIXI.DisplayObject# */ get x() { return this.position.x; } - /** - * Sets the X position of the object. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { this.transform.position.x = value; } @@ -432,19 +426,13 @@ * An alias to position.y * * @member {number} - * @memberof PIXI.DisplayObject# */ get y() { return this.position.y; } - /** - * Sets the Y position of the object. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { this.transform.position.y = value; } @@ -453,7 +441,6 @@ * Current transform of the object based on world (parent) factors * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get worldTransform() @@ -465,7 +452,6 @@ * Current transform of the object based on local factors: position, scale, other stuff * * @member {PIXI.Matrix} - * @memberof PIXI.DisplayObject# * @readonly */ get localTransform() @@ -478,19 +464,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get position() { return this.transform.position; } - /** - * Copies the point to the position of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set position(value) + set position(value) // eslint-disable-line require-jsdoc { this.transform.position.copy(value); } @@ -500,19 +480,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get scale() { return this.transform.scale; } - /** - * Copies the point to the scale of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set scale(value) + set scale(value) // eslint-disable-line require-jsdoc { this.transform.scale.copy(value); } @@ -522,19 +496,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.Point|PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get pivot() { return this.transform.pivot; } - /** - * Copies the point to the pivot of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set pivot(value) + set pivot(value) // eslint-disable-line require-jsdoc { this.transform.pivot.copy(value); } @@ -544,19 +512,13 @@ * Assignment by value since pixi-v4. * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get skew() { return this.transform.skew; } - /** - * Copies the point to the skew of the object. - * - * @param {PIXI.Point} value - The value to set to. - */ - set skew(value) + set skew(value) // eslint-disable-line require-jsdoc { this.transform.skew.copy(value); } @@ -565,19 +527,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.DisplayObject# */ get rotation() { return this.transform.rotation; } - /** - * Sets the rotation of the object. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this.transform.rotation = value; } @@ -586,7 +542,6 @@ * Indicates if the object is globally visible. * * @member {boolean} - * @memberof PIXI.DisplayObject# * @readonly */ get worldVisible() @@ -615,19 +570,13 @@ * @todo For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask. * * @member {PIXI.Graphics|PIXI.Sprite} - * @memberof PIXI.DisplayObject# */ get mask() { return this._mask; } - /** - * Sets the mask. - * - * @param {PIXI.Graphics|PIXI.Sprite} value - The value to set to. - */ - set mask(value) + set mask(value) // eslint-disable-line require-jsdoc { if (this._mask) { @@ -648,19 +597,13 @@ * To remove filters simply set this property to 'null' * * @member {PIXI.Filter[]} - * @memberof PIXI.DisplayObject# */ get filters() { return this._filters && this._filters.slice(); } - /** - * Shallow copies the array to the filters of the object. - * - * @param {PIXI.Filter[]} value - The filters to set. - */ - set filters(value) + set filters(value) // eslint-disable-line require-jsdoc { this._filters = value && value.slice(); } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 35ed5e6..4c449f3 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -134,19 +134,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.Transform# */ get rotation() { return this._rotation; } - /** - * Set the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index 1e8d0c6..1bba127 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -165,19 +165,13 @@ * The rotation of the object in radians. * * @member {number} - * @memberof PIXI.TransformStatic# */ get rotation() { return this._rotation; } - /** - * Sets the rotation of the transform. - * - * @param {number} value - The value to set to. - */ - set rotation(value) + set rotation(value) // eslint-disable-line require-jsdoc { this._rotation = value; this.updateSkew(); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 45f7ab1..95f2af4 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -1121,6 +1121,10 @@ * options have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have * their destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 2d53be3..fe62c2b 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -10,7 +10,7 @@ * now share 4 bytes on the vertex buffer * * Heavily inspired by LibGDX's CanvasGraphicsRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/CanvasGraphicsRenderer.java + * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java */ /** diff --git a/src/core/index.js b/src/core/index.js index dcab8a6..90155f9 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -44,32 +44,5 @@ export { default as Quad } from './renderers/webgl/utils/Quad'; export { default as SpriteMaskFilter } from './renderers/webgl/filters/spriteMask/SpriteMaskFilter'; export { default as Filter } from './renderers/webgl/filters/Filter'; - -/** - * This helper function will automatically detect which renderer you should be using. - * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by - * the browser then this function will return a canvas renderer - * - * @memberof PIXI - * @function autoDetectRenderer - * @param {number} [width=800] - the width of the renderers view - * @param {number} [height=600] - the height of the renderers view - * @param {object} [options] - The optional renderer parameters - * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional - * @param {boolean} [options.transparent=false] - If the render view is transparent, default false - * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present - * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(width = 800, height = 600, options, noWebGL) -{ - if (!noWebGL && utils.isWebGLSupported()) - { - return new WebGLRenderer(width, height, options); - } - - return new CanvasRenderer(width, height, options); -} +export { default as Application } from './Application'; +export { autoDetectRenderer } from './autoDetectRenderer'; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index b86e23d..50c2f31 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -71,8 +71,8 @@ * This is the small part of gameofbombs.com portal system. It works. * * @author Ivan @ivanpopelyshev - * - * @namespace PIXI.GroupD8 + * @class + * @memberof PIXI */ const GroupD8 = { E: 0, @@ -104,7 +104,7 @@ /** * Adds 180 degrees to rotation. Commutative operation. * - * @method + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to rotate. * @returns {number} rotated number */ @@ -113,12 +113,14 @@ /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * + * @memberof PIXI.GroupD8 * @param {number} rotation - The number to check. * @returns {boolean} Whether or not the width/height should be swapped. */ isSwapWidthHeight: (rotation) => (rotation & 3) === 2, /** + * @memberof PIXI.GroupD8 * @param {number} dx - TODO * @param {number} dy - TODO * @@ -164,6 +166,7 @@ /** * Helps sprite to compensate texture packer rotation. * + * @memberof PIXI.GroupD8 * @param {PIXI.Matrix} matrix - sprite world matrix * @param {number} rotation - The rotation factor to use. * @param {number} tx - sprite anchoring diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index 84347da..fd5622d 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -62,19 +62,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get x() { return this._x; } - /** - * Sets the X component. - * - * @param {number} value - The value to set to. - */ - set x(value) + set x(value) // eslint-disable-line require-jsdoc { if (this._x !== value) { @@ -87,19 +81,13 @@ * The position of the displayObject on the x axis relative to the local coordinates of the parent. * * @member {number} - * @memberof PIXI.ObservablePoint# */ get y() { return this._y; } - /** - * Sets the Y component. - * - * @param {number} value - The value to set to. - */ - set y(value) + set y(value) // eslint-disable-line require-jsdoc { if (this._y !== value) { diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index e137ba1..29b312a 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -56,7 +56,6 @@ * returns the left edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle# */ get left() { @@ -67,7 +66,6 @@ * returns the right edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get right() { @@ -78,7 +76,6 @@ * returns the top edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get top() { @@ -89,7 +86,6 @@ * returns the bottom edge of the rectangle * * @member {number} - * @memberof PIXI.Rectangle */ get bottom() { @@ -226,19 +222,14 @@ /** * Enlarges this rectangle to include the passed rectangle. * - * @param {PIXI.Rectangle} rect - The rectangle to include. + * @param {PIXI.Rectangle} rectangle - The rectangle to include. */ - enlarge(rect) + enlarge(rectangle) { - if (rect === Rectangle.EMPTY) - { - return; - } - - const x1 = Math.min(this.x, rect.x); - const x2 = Math.max(this.x + this.width, rect.x + rect.width); - const y1 = Math.min(this.y, rect.y); - const y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rectangle.x); + const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width); + const y1 = Math.min(this.y, rectangle.y); + const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height); this.x = x1; this.width = x2 - x1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 0f1c817..fa116a6 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -280,19 +280,13 @@ * The background color to fill if not transparent * * @member {number} - * @memberof PIXI.SystemRenderer# */ get backgroundColor() { return this._backgroundColor; } - /** - * Sets the background color. - * - * @param {number} value - The value to set to. - */ - set backgroundColor(value) + set backgroundColor(value) // eslint-disable-line require-jsdoc { this._backgroundColor = value; this._backgroundColorString = hex2string(value); diff --git a/src/core/renderers/canvas/utils/CanvasRenderTarget.js b/src/core/renderers/canvas/utils/CanvasRenderTarget.js index 1f1496a..3de0aef 100644 --- a/src/core/renderers/canvas/utils/CanvasRenderTarget.js +++ b/src/core/renderers/canvas/utils/CanvasRenderTarget.js @@ -72,19 +72,13 @@ * The width of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get width() { return this.canvas.width; } - /** - * Sets the width. - * - * @param {number} val - The value to set. - */ - set width(val) + set width(val) // eslint-disable-line require-jsdoc { this.canvas.width = val; } @@ -93,19 +87,13 @@ * The height of the canvas buffer in pixels. * * @member {number} - * @memberof PIXI.CanvasRenderTarget# */ get height() { return this.canvas.height; } - /** - * Sets the height. - * - * @param {number} val - The value to set. - */ - set height(val) + set height(val) // eslint-disable-line require-jsdoc { this.canvas.height = val; } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 61245e8..aad715a 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -34,12 +34,17 @@ */ pushMask(target, maskData) { + // TODO the root check means scissor rect will not + // be used on render textures more info here: + // https://github.com/pixijs/pixi.js/pull/3545 + if (maskData.texture) { this.pushSpriteMask(target, maskData); } else if (this.enableScissor && !this.scissor + && this.renderer._activeRenderTarget.root && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f6b8f31..36ea5bb 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -121,6 +121,9 @@ this._transformID = -1; this._textureID = -1; + this._transformTrimmedID = -1; + this._textureTrimmedID = -1; + /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' & '_renderCanvas' methods. @@ -139,6 +142,7 @@ _onTextureUpdate() { this._textureID = -1; + this._textureTrimmedID = -1; // so if _width is 0 then width was not set.. if (this._width) @@ -160,6 +164,7 @@ _onAnchorUpdate() { this._transformID = -1; + this._transformTrimmedID = -1; } /** @@ -241,6 +246,13 @@ { this.vertexTrimmedData = new Float32Array(8); } + else if (this._transformTrimmedID === this.transform._worldID && this._textureTrimmedID === this._texture._updateID) + { + return; + } + + this._transformTrimmedID = this.transform._worldID; + this._textureTrimmedID = this._texture._updateID; // lets do some special trim code! const texture = this._texture; @@ -475,19 +487,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get width() { return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.x) || 1; @@ -499,19 +505,13 @@ * The height of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Sprite# */ get height() { return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the sprite by modifying the scale. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { const s = sign(this.scale.y) || 1; @@ -526,19 +526,13 @@ * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner * * @member {PIXI.ObservablePoint} - * @memberof PIXI.Sprite# */ get anchor() { return this._anchor; } - /** - * Copies the anchor to the sprite. - * - * @param {number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { this._anchor.copy(value); } @@ -548,7 +542,6 @@ * 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.Sprite# * @default 0xFFFFFF */ get tint() @@ -556,12 +549,7 @@ return this._tint; } - /** - * Sets the tint of the sprite. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._tint = value; this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16); @@ -571,19 +559,13 @@ * The texture that the sprite is using * * @member {PIXI.Texture} - * @memberof PIXI.Sprite# */ get texture() { return this._texture; } - /** - * Sets the texture of the sprite. - * - * @param {PIXI.Texture} value - The value to set to. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -594,6 +576,7 @@ this.cachedTint = 0xFFFFFF; this._textureID = -1; + this._textureTrimmedID = -1; if (value) { diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 5dfc36f..1cf316b 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -4,7 +4,8 @@ /** * Utility methods for Sprite/Texture tinting. * - * @namespace PIXI.CanvasTinter + * @class + * @memberof PIXI */ const CanvasTinter = { /** diff --git a/src/core/sprites/webgl/BatchBuffer.js b/src/core/sprites/webgl/BatchBuffer.js index ff70e6e..09464ae 100644 --- a/src/core/sprites/webgl/BatchBuffer.js +++ b/src/core/sprites/webgl/BatchBuffer.js @@ -1,5 +1,6 @@ /** * @class + * @memberof PIXI */ export default class Buffer { diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 8f53300..e77b39a 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -133,7 +133,7 @@ .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); - /* eslint-disable max-len */ + /* eslint-enable max-len */ } this.vao = this.vaos[0]; @@ -351,9 +351,11 @@ uint32View[index + 12] = uvs[2]; uint32View[index + 17] = uvs[3]; + /* eslint-disable max-len */ uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = sprite._tintRGB + (Math.min(sprite.worldAlpha, 1) * 255 << 24); float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = nextTexture._virtalBoundId; + /* eslint-enable max-len */ index += 20; } @@ -369,6 +371,8 @@ this.vaoMax++; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); + /* eslint-disable max-len */ + // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() .addIndex(this.indexBuffer) @@ -376,6 +380,8 @@ .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) .addAttribute(this.vertexBuffers[this.vertexCount], this.shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + + /* eslint-enable max-len */ } this.renderer.bindVao(this.vaos[this.vertexCount]); diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index a807596..81817b1 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -1,3 +1,4 @@ +precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; attribute vec4 aColor; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 3aa3182..013625a 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -158,12 +158,10 @@ width += style.dropShadowDistance; } - width += style.padding * 2; - - this.canvas.width = Math.ceil((width + this.context.lineWidth) * this.resolution); + this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); // calculate text height - const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + ((lines.length - 1) * lineHeight); @@ -173,7 +171,7 @@ height += style.dropShadowDistance; } - this.canvas.height = Math.ceil((height + (this._style.padding * 2)) * this.resolution); + this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); this.context.scale(this.resolution, this.resolution); @@ -405,8 +403,9 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; + const style = this._style; const lines = text.split('\n'); - const wordWrapWidth = this._style.wordWrapWidth; + const wordWrapWidth = style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { @@ -417,7 +416,7 @@ { const wordWidth = this.context.measureText(words[j]).width; - if (this._style.breakWords && wordWidth > wordWrapWidth) + if (style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle const characters = words[j].split(''); @@ -601,7 +600,6 @@ * The width of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get width() { @@ -610,12 +608,7 @@ return Math.abs(this.scale.x) * this._texture.orig.width; } - /** - * Sets the width of the text. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -629,7 +622,6 @@ * The height of the Text, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.Text# */ get height() { @@ -638,12 +630,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } - /** - * Sets the height of the text. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this.updateText(true); @@ -658,19 +645,13 @@ * object and mark the text as dirty. * * @member {object|PIXI.TextStyle} - * @memberof PIXI.Text# */ get style() { return this._style; } - /** - * Sets the style of the text. - * - * @param {object} style - The value to set to. - */ - set style(style) + set style(style) // eslint-disable-line require-jsdoc { style = style || {}; @@ -691,19 +672,13 @@ * Set the copy for the text object. To split a line you can use '\n'. * * @member {string} - * @memberof PIXI.Text# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} text - The value to set to. - */ - set text(text) + set text(text) // eslint-disable-line require-jsdoc { text = String(text || ' '); diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 92b2eb9..5d50146 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -25,18 +25,17 @@ * baseRenderTexture.render(sprite); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * * let baseRenderTexture = new PIXI.BaseRenderTexture(100, 100); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * - * renderer.render(doc, renderTexture); // Renders to center of RenderTexture + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index 1e0f270..4c5034f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -7,8 +7,7 @@ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. * - * A RenderTexture takes a snapshot of any Display Object given to its render method. The position - * and rotation of the given Display Objects is ignored. For example: + * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js * let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 }); @@ -23,15 +22,16 @@ * renderer.render(sprite, renderTexture); * ``` * - * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual - * position a Container should be used: + * The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 + * you can clear the transform * * ```js - * let doc = new PIXI.Container(); * - * doc.addChild(sprite); + * sprite.setTransform() * - * renderer.render(doc, renderTexture); // Renders to center of renderTexture + * let renderTexture = new PIXI.RenderTexture.create(100, 100); + * + * renderer.render(sprite, renderTexture); // Renders to center of RenderTexture * ``` * * @class diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 3066a3a..ca31456 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -445,19 +445,13 @@ * The frame specifies the region of the base texture that this texture uses. * * @member {PIXI.Rectangle} - * @memberof PIXI.Texture# */ get frame() { return this._frame; } - /** - * Set the frame. - * - * @param {Rectangle} frame - The new frame to set. - */ - set frame(frame) + set frame(frame) // eslint-disable-line require-jsdoc { this._frame = frame; @@ -496,12 +490,7 @@ return this._rotate; } - /** - * Set the rotation - * - * @param {number} rotate - The new rotation to set. - */ - set rotate(rotate) + set rotate(rotate) // eslint-disable-line require-jsdoc { this._rotate = rotate; if (this.valid) diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 0098759..59eb9fd 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -267,19 +267,13 @@ * Should the base texture automatically update itself, set to true by default * * @member {boolean} - * @memberof PIXI.VideoBaseTexture# */ get autoUpdate() { return this._autoUpdate; } - /** - * Sets autoUpdate property. - * - * @param {number} value - enable auto update or not - */ - set autoUpdate(value) + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) { diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index d6b30e1..d98a1f0 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -337,7 +337,7 @@ * {@link PIXI.ticker.Ticker#speed}, which is specific * to scaling {@link PIXI.ticker.Ticker#deltaTime}. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @readonly */ get FPS() @@ -353,7 +353,7 @@ * When setting this property it is clamped to a value between * `0` and `PIXI.settings.TARGET_FPMS * 1000`. * - * @memberof PIXI.ticker.Ticker# + * @member {number} * @default 10 */ get minFPS() @@ -361,12 +361,7 @@ return 1000 / this._maxElapsedMS; } - /** - * Sets the min fps. - * - * @param {number} fps - value to set. - */ - set minFPS(fps) + set minFPS(fps) // eslint-disable-line require-jsdoc { // Clamp: 0 to TARGET_FPMS const minFPMS = Math.min(Math.max(0, fps) / 1000, settings.TARGET_FPMS); diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index b82832d..941ca05 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -5,6 +5,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index fd3a61e..60228bb 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -6,6 +6,8 @@ /** * The extract manager provides functionality to export content from the renderers. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract + * * @class * @memberof PIXI */ diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 53a809c..13b804f 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,8 +32,9 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation + * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. */ - constructor(textures) + constructor(textures, autoUpdate) { super(textures[0] instanceof core.Texture ? textures[0] : textures[0].texture); @@ -50,6 +51,14 @@ this.textures = textures; /** + * `true` uses PIXI.ticker.shared to auto update animation time. + * @type {boolean} + * @default true + * @private + */ + this._autoUpdate = autoUpdate !== false; + + /** * The speed that the AnimatedSprite will play at. Higher is faster, lower is slower * * @member {number} @@ -68,16 +77,14 @@ /** * Function to call when a AnimatedSprite finishes playing * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onComplete = null; /** * Function to call when a AnimatedSprite changes which texture is being rendered * - * @method - * @memberof PIXI.extras.AnimatedSprite# + * @member {Function} */ this.onFrameChange = null; @@ -110,7 +117,10 @@ } this.playing = false; - core.ticker.shared.remove(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.remove(this.update, this); + } } /** @@ -125,7 +135,10 @@ } this.playing = true; - core.ticker.shared.add(this.update, this); + if (this._autoUpdate) + { + core.ticker.shared.add(this.update, this); + } } /** @@ -300,7 +313,6 @@ * * @readonly * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @default 0 */ get totalFrames() @@ -312,19 +324,13 @@ * The array of textures used for this AnimatedSprite * * @member {PIXI.Texture[]} - * @memberof PIXI.extras.AnimatedSprite# */ get textures() { return this._textures; } - /** - * Sets the textures. - * - * @param {PIXI.Texture[]} value - The texture to set. - */ - set textures(value) + set textures(value) // eslint-disable-line require-jsdoc { if (value[0] instanceof core.Texture) { @@ -348,7 +354,6 @@ * The AnimatedSprites current frame index * * @member {number} - * @memberof PIXI.extras.AnimatedSprite# * @readonly */ get currentFrame() diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 94e18de..fb6c343 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -318,19 +318,13 @@ * The tint of the BitmapText object * * @member {number} - * @memberof PIXI.extras.BitmapText# */ get tint() { return this._font.tint; } - /** - * Sets the tint. - * - * @param {number} value - The value to set to. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -342,19 +336,13 @@ * * @member {string} * @default 'left' - * @memberof PIXI.extras.BitmapText# */ get align() { return this._font.align; } - /** - * Sets the alignment - * - * @param {string} value - The value to set to. - */ - set align(value) + set align(value) // eslint-disable-line require-jsdoc { this._font.align = value || 'left'; @@ -368,19 +356,13 @@ * Setting the anchor to 1,1 would mean the text's origin point will be the bottom right corner * * @member {PIXI.Point | number} - * @memberof PIXI.extras.BitmapText# */ get anchor() { return this._anchor; } - /** - * Sets the anchor. - * - * @param {PIXI.Point|number} value - The value to set to. - */ - set anchor(value) + set anchor(value) // eslint-disable-line require-jsdoc { if (typeof value === 'number') { @@ -396,19 +378,13 @@ * The font descriptor of the BitmapText object * * @member {string|object} - * @memberof PIXI.extras.BitmapText# */ get font() { return this._font; } - /** - * Sets the font. - * - * @param {string|object} value - The value to set to. - */ - set font(value) + set font(value) // eslint-disable-line require-jsdoc { if (!value) { @@ -435,19 +411,13 @@ * The text of the BitmapText object * * @member {string} - * @memberof PIXI.extras.BitmapText# */ get text() { return this._text; } - /** - * Sets the text. - * - * @param {string} value - The value to set to. - */ - set text(value) + set text(value) // eslint-disable-line require-jsdoc { value = value.toString() || ' '; if (this._text === value) @@ -463,7 +433,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textWidth() @@ -478,7 +447,6 @@ * which is defined in the style object * * @member {number} - * @memberof PIXI.extras.BitmapText# * @readonly */ get textHeight() diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index bbc6a8e..58623b1 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -51,18 +51,13 @@ /** * texture property * @member {PIXI.Texture} - * @memberof PIXI.TextureTransform */ get texture() { return this._texture; } - /** - * sets texture value - * @param {PIXI.Texture} value texture to be set - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { this._texture = value; this._lastTextureID = -1; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a8bcfba..f90d248 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -70,6 +70,14 @@ * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; + + /** + * Whether or not anchor affects uvs + * + * @member {boolean} + * @default false + */ + this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut @@ -77,19 +85,13 @@ * * @default 0.5 * @member {number} - * @memberof PIXI.TilingSprite */ get clampMargin() { return this.uvTransform.clampMargin; } - /** - * setter for clampMargin - * - * @param {number} value assigned value - */ - set clampMargin(value) + set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); @@ -99,19 +101,13 @@ * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.DisplayObject# */ get tileScale() { return this.tileTransform.scale; } - /** - * Copies the point to the scale of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tileScale(value) + set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } @@ -120,19 +116,13 @@ * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} - * @memberof PIXI.TilingSprite# */ get tilePosition() { return this.tileTransform.position; } - /** - * Copies the point to the position of the tiled image. - * - * @param {PIXI.Point|PIXI.ObservablePoint} value - The value to set to. - */ - set tilePosition(value) + set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } @@ -391,19 +381,13 @@ * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; } @@ -412,19 +396,13 @@ * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} - * @memberof PIXI.extras.TilingSprite# */ get height() { return this._height; } - /** - * Sets the width. - * - * @param {number} value - The value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; } diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 70ed184..18043a7 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -280,7 +280,7 @@ // need to set // const m = _tempMatrix; - this.transform.worldTransform.copy(m); + this.transform.localTransform.copy(m); m.invert(); m.tx -= bounds.x; diff --git a/src/extras/webgl/TilingSpriteRenderer.js b/src/extras/webgl/TilingSpriteRenderer.js index 8bad0c4..f8d0d92 100644 --- a/src/extras/webgl/TilingSpriteRenderer.js +++ b/src/extras/webgl/TilingSpriteRenderer.js @@ -8,6 +8,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class TilingSpriteRenderer extends core.ObjectRenderer { @@ -65,13 +69,16 @@ vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x); vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y); - vertices = quad.uvs; + if (ts.uvRespectAnchor) + { + vertices = quad.uvs; - vertices[0] = vertices[6] = -ts.anchor.x; - vertices[1] = vertices[3] = -ts.anchor.y; + vertices[0] = vertices[6] = -ts.anchor.x; + vertices[1] = vertices[3] = -ts.anchor.y; - vertices[2] = vertices[4] = 1.0 - ts.anchor.x; - vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + vertices[2] = vertices[4] = 1.0 - ts.anchor.x; + vertices[5] = vertices[7] = 1.0 - ts.anchor.y; + } quad.upload(); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 8a05893..340fc58 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -53,7 +53,6 @@ * Sets the strength of both the blurX and blurY properties simultaneously * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blur() @@ -61,12 +60,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -76,7 +70,6 @@ * Sets the number of passes for blur. More passes means higher quaility bluring. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 1 */ get quality() @@ -84,12 +77,7 @@ return this.blurXFilter.quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this.blurXFilter.quality = this.blurYFilter.quality = value; } @@ -98,7 +86,6 @@ * Sets the strength of the blurX property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurX() @@ -106,12 +93,7 @@ return this.blurXFilter.blur; } - /** - * Sets the strength of the blurX. - * - * @param {number} value - The value to set. - */ - set blurX(value) + set blurX(value) // eslint-disable-line require-jsdoc { this.blurXFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; @@ -121,7 +103,6 @@ * Sets the strength of the blurY property * * @member {number} - * @memberOf PIXI.filters.BlurFilter# * @default 2 */ get blurY() @@ -129,12 +110,7 @@ return this.blurYFilter.blur; } - /** - * Sets the strength of the blurY. - * - * @param {number} value - The value to set. - */ - set blurY(value) + set blurY(value) // eslint-disable-line require-jsdoc { this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 338096c..def99c3 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -98,7 +98,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 16 */ get blur() @@ -106,12 +105,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -122,7 +116,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -130,12 +123,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 94cbf37..638e0f0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -97,7 +97,6 @@ * Sets the strength of both the blur. * * @member {number} - * @memberof PIXI.filters.BlurYFilter# * @default 2 */ get blur() @@ -105,12 +104,7 @@ return this.strength; } - /** - * Sets the strength of the blur. - * - * @param {number} value - The value to set. - */ - set blur(value) + set blur(value) // eslint-disable-line require-jsdoc { this.padding = Math.abs(value) * 2; this.strength = value; @@ -121,7 +115,6 @@ * quaility bluring but the lower the performance. * * @member {number} - * @memberof PIXI.filters.BlurXFilter# * @default 4 */ get quality() @@ -129,12 +122,7 @@ return this._quality; } - /** - * Sets the quality of the blur. - * - * @param {number} value - The value to set. - */ - set quality(value) + set quality(value) // eslint-disable-line require-jsdoc { this._quality = value; this.passes = value; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 36f51f6..8509505 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -564,7 +564,6 @@ * The matrix of the color matrix filter * * @member {number[]} - * @memberof PIXI.filters.ColorMatrixFilter# * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] */ get matrix() @@ -572,12 +571,7 @@ return this.uniforms.m; } - /** - * Sets the matrix directly. - * - * @param {number[]} value - the value to set to. - */ - set matrix(value) + set matrix(value) // eslint-disable-line require-jsdoc { this.uniforms.m = value; } diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index 978c886..112de0b 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -70,19 +70,13 @@ * The texture used for the displacement map. Must be power of 2 sized texture. * * @member {PIXI.Texture} - * @memberof PIXI.filters.DisplacementFilter# */ get map() { return this.uniforms.mapSampler; } - /** - * Sets the texture to use for the displacement. - * - * @param {PIXI.Texture} value - The texture to set to. - */ - set map(value) + set map(value) // eslint-disable-line require-jsdoc { this.uniforms.mapSampler = value; } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index f5b7296..2cc52ae 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -35,7 +35,6 @@ * The amount of noise to apply. * * @member {number} - * @memberof PIXI.filters.NoiseFilter# * @default 0.5 */ get noise() @@ -43,12 +42,7 @@ return this.uniforms.noise; } - /** - * Sets the amount of noise to apply. - * - * @param {number} value - The value to set to. - */ - set noise(value) + set noise(value) // eslint-disable-line require-jsdoc { this.uniforms.noise = value; } diff --git a/src/index.js b/src/index.js index 63595bc..59356cf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -// import polyfills -import './polyfill'; +// import polyfills. Done as an export to make sure polyfills are imported first +export * from './polyfill'; // export core export * from './deprecation'; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index b18cd35..7d51134 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,7 +15,8 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. - * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction + * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -113,8 +114,7 @@ * It is currently set to false as this is how pixi used to work. This will be set to true in * future versions of pixi. * - * @member {boolean} moveWhenInside - * @memberof PIXI.interaction.InteractionManager# + * @member {boolean} * @default false */ this.moveWhenInside = false; diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 2e7addc..02c04a0 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -113,7 +113,6 @@ * tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# */ this.tintRgb = new Float32Array([1, 1, 1]); @@ -225,19 +224,13 @@ * The texture that the mesh uses. * * @member {PIXI.Texture} - * @memberof PIXI.mesh.Mesh# */ get texture() { return this._texture; } - /** - * Sets the texture the mesh uses. - * - * @param {Texture} value - The value to set. - */ - set texture(value) + set texture(value) // eslint-disable-line require-jsdoc { if (this._texture === value) { @@ -264,7 +257,6 @@ * The tint applied to the mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * * @member {number} - * @memberof PIXI.mesh.Mesh# * @default 0xFFFFFF */ get tint() @@ -272,12 +264,7 @@ return core.utils.rgb2hex(this.tintRgb); } - /** - * Sets the tint the mesh uses. - * - * @param {number} value - The value to set. - */ - set tint(value) + set tint(value) // eslint-disable-line require-jsdoc { this.tintRgb = core.utils.hex2rgb(value, this.tintRgb); } diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index b7217d4..08ef76e 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -84,6 +84,8 @@ * The width of the left column (a) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.leftWidth = typeof leftWidth !== 'undefined' ? leftWidth : DEFAULT_BORDER_SIZE; @@ -91,6 +93,8 @@ * The width of the right column (b) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.rightWidth = typeof rightWidth !== 'undefined' ? rightWidth : DEFAULT_BORDER_SIZE; @@ -98,6 +102,8 @@ * The height of the top row (c) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.topHeight = typeof topHeight !== 'undefined' ? topHeight : DEFAULT_BORDER_SIZE; @@ -105,6 +111,8 @@ * The height of the bottom row (d) * * @member {number} + * @memberof PIXI.NineSlicePlane# + * @override */ this.bottomHeight = typeof bottomHeight !== 'undefined' ? bottomHeight : DEFAULT_BORDER_SIZE; } @@ -245,19 +253,13 @@ * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get width() { return this._width; } - /** - * Sets the width. - * - * @param {number} value - the value to set to. - */ - set width(value) + set width(value) // eslint-disable-line require-jsdoc { this._width = value; this.updateVerticalVertices(); @@ -267,19 +269,13 @@ * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane * * @member {number} - * @memberof PIXI.NineSlicePlane# */ get height() { return this._height; } - /** - * Sets the height. - * - * @param {number} value - the value to set to. - */ - set height(value) + set height(value) // eslint-disable-line require-jsdoc { this._height = value; this.updateHorizontalVertices(); @@ -295,12 +291,7 @@ return this._leftWidth; } - /** - * Sets the width of the left column. - * - * @param {number} value - the value to set to. - */ - set leftWidth(value) + set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; @@ -323,12 +314,7 @@ return this._rightWidth; } - /** - * Sets the width of the right column. - * - * @param {number} value - the value to set to. - */ - set rightWidth(value) + set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; @@ -351,12 +337,7 @@ return this._topHeight; } - /** - * Sets the height of the top row. - * - * @param {number} value - the value to set to. - */ - set topHeight(value) + set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; @@ -379,12 +360,7 @@ return this._bottomHeight; } - /** - * Sets the height of the bottom row. - * - * @param {number} value - the value to set to. - */ - set bottomHeight(value) + set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index d713ec1..6ff8aaf 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -93,12 +93,12 @@ const textureUvs = this._texture._uvs; const offset = new core.Point(textureUvs.x0, textureUvs.y0); - const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, Number(textureUvs.y2 - textureUvs.y0)); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; uvs[2] = 0 + offset.x; - uvs[3] = Number(factor.y) + offset.y; + uvs[3] = factor.y + offset.y; colors[0] = 1; colors[1] = 1; @@ -118,7 +118,7 @@ uvs[index + 1] = 0 + offset.y; uvs[index + 2] = (amount * factor.x) + offset.x; - uvs[index + 3] = Number(factor.y) + offset.y; + uvs[index + 3] = factor.y + offset.y; index = i * 2; colors[index] = 1; diff --git a/src/mesh/webgl/MeshRenderer.js b/src/mesh/webgl/MeshRenderer.js index b855510..e1d88e7 100644 --- a/src/mesh/webgl/MeshRenderer.js +++ b/src/mesh/webgl/MeshRenderer.js @@ -6,6 +6,10 @@ /** * WebGL renderer plugin for tiling sprites + * + * @class + * @memberof PIXI + * @extends PIXI.ObjectRenderer */ export default class MeshRenderer extends core.ObjectRenderer { @@ -77,6 +81,8 @@ mesh._glDatas[renderer.CONTEXT_UID] = glData; } + renderer.bindVao(glData.vao); + if (mesh.dirty !== glData.dirty) { glData.dirty = mesh.dirty; @@ -103,7 +109,6 @@ const drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; - renderer.bindVao(glData.vao); glData.vao.draw(drawMode, mesh.indices.length, 0); } } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 42048a8..67796cf 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -328,6 +328,10 @@ * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their * destroy method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the texture of the child sprite + * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true + * Should it destroy the base texture of the child sprite */ destroy(options) { diff --git a/src/prepare/canvas/CanvasPrepare.js b/src/prepare/canvas/CanvasPrepare.js index dfed28d..4b99d22 100644 --- a/src/prepare/canvas/CanvasPrepare.js +++ b/src/prepare/canvas/CanvasPrepare.js @@ -9,6 +9,8 @@ * textures to an offline canvas. * This draw call will force the texture to be moved onto the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index d6e5a70..1ef7467 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -4,6 +4,8 @@ /** * The prepare manager provides functionality to upload content to the GPU. * + * An instance of this class is automatically created by default, and can be found at renderer.plugins.prepare + * * @class * @memberof PIXI */ diff --git a/test/core/Application.js b/test/core/Application.js new file mode 100644 index 0000000..aa726b0 --- /dev/null +++ b/test/core/Application.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('PIXI.Application', function () +{ + it('should generate application', function (done) + { + expect(PIXI.Application).to.be.a.function; + const app = new PIXI.Application(); + + expect(app.stage).to.be.instanceof(PIXI.Container); + expect(app.ticker).to.be.instanceof(PIXI.ticker.Ticker); + expect(app.renderer).to.be.ok; + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); +}); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index a5fd99a..8b93478 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -1,10 +1,10 @@ 'use strict'; -describe('BaseTexture', () => +describe('BaseTexture', function () { - describe('updateImageType', () => + describe('updateImageType', function () { - it('should allow no extension', () => + it('should allow no extension', function () { const baseTexture = new PIXI.BaseTexture(); diff --git a/test/core/Container.js b/test/core/Container.js index a88a2e3..8a10b40 100644 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Container', () => +describe('PIXI.Container', function () { - describe('parent', () => + describe('parent', function () { - it('should be present when adding children to Container', () => + it('should be present when adding children to Container', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -16,9 +16,9 @@ }); }); - describe('events', () => + describe('events', function () { - it('should trigger "added" and "removed" events on its children', () => + it('should trigger "added" and "removed" events on its children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -48,9 +48,9 @@ }); }); - describe('addChild', () => + describe('addChild', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -59,7 +59,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChild(child); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -72,9 +72,9 @@ }); }); - describe('removeChildAt', () => + describe('removeChildAt', function () { - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -82,7 +82,7 @@ assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -97,9 +97,9 @@ }); }); - describe('addChildAt', () => + describe('addChildAt', function () { - it('should allow placements at start', () => + it('should allow placements at start', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -111,7 +111,7 @@ expect(container.children[0]).to.be.equals(child); }); - it('should allow placements at end', () => + it('should allow placements at end', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -123,7 +123,7 @@ expect(container.children[1]).to.be.equals(child); }); - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -134,7 +134,7 @@ expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1'); }); - it('should remove from current parent', () => + it('should remove from current parent', function () { const parent = new PIXI.Container(); const container = new PIXI.Container(); @@ -143,7 +143,7 @@ assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); }); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -159,9 +159,9 @@ }); }); - describe('removeChild', () => + describe('removeChild', function () { - it('should ignore non-children', () => + it('should ignore non-children', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -173,7 +173,7 @@ expect(container.children.length).to.be.equals(1); }); - it('should remove all children supplied', () => + it('should remove all children supplied', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -188,7 +188,7 @@ expect(container.children.length).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -204,9 +204,9 @@ }); }); - describe('getChildIndex', () => + describe('getChildIndex', function () { - it('should return the correct index', () => + it('should return the correct index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -216,7 +216,7 @@ expect(container.getChildIndex(child)).to.be.equals(1); }); - it('should throw when child does not exist', () => + it('should throw when child does not exist', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -226,9 +226,9 @@ }); }); - describe('getChildAt', () => + describe('getChildAt', function () { - it('should throw when out-of-bounds', () => + it('should throw when out-of-bounds', function () { const container = new PIXI.Container(); @@ -237,9 +237,9 @@ }); }); - describe('setChildIndex', () => + describe('setChildIndex', function () { - it('should throw on out-of-bounds', () => + it('should throw on out-of-bounds', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -250,7 +250,7 @@ expect(() => container.setChildIndex(child, 1)).to.throw('The supplied index is out of bounds'); }); - it('should throw when child does not belong', () => + it('should throw when child does not belong', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -261,7 +261,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should set index', () => + it('should set index', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -279,7 +279,7 @@ expect(container.children.indexOf(child)).to.be.equals(0); }); - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -295,9 +295,9 @@ }); }); - describe('swapChildren', () => + describe('swapChildren', function () { - it('should call onChildrenChange', () => + it('should call onChildrenChange', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -317,7 +317,7 @@ expect(spy).to.have.been.calledWith(0); }); - it('should not call onChildrenChange if supplied children are equal', () => + it('should not call onChildrenChange if supplied children are equal', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -331,7 +331,7 @@ expect(spy).to.not.have.been.called; }); - it('should throw if children do not belong', () => + it('should throw if children do not belong', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -344,7 +344,7 @@ .to.throw('The supplied DisplayObject must be a child of the caller'); }); - it('should result in swapped child positions', () => + it('should result in swapped child positions', function () { const container = new PIXI.Container(); const child1 = new PIXI.DisplayObject(); @@ -362,9 +362,9 @@ }); }); - describe('render', () => + describe('render', function () { - it('should not render when object not visible', () => + it('should not render when object not visible', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -379,7 +379,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when alpha is zero', () => + it('should not render when alpha is zero', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -394,7 +394,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should not render when object not renderable', () => + it('should not render when object not renderable', function () { const container = new PIXI.Container(); const webGLSpy = sinon.spy(container._renderWebGL); @@ -409,7 +409,7 @@ expect(canvasSpy).to.not.have.been.called; }); - it('should render children', () => + it('should render children', function () { const container = new PIXI.Container(); const child = new PIXI.Container(); @@ -426,9 +426,9 @@ }); }); - describe('removeChildren', () => + describe('removeChildren', function () { - it('should remove all children when no arguments supplied', () => + it('should remove all children when no arguments supplied', function () { const container = new PIXI.Container(); let removed = []; @@ -443,7 +443,7 @@ expect(removed.length).to.be.equals(3); }); - it('should return empty array if no children', () => + it('should return empty array if no children', function () { const container = new PIXI.Container(); const removed = container.removeChildren(); @@ -451,7 +451,7 @@ expect(removed.length).to.be.equals(0); }); - it('should handle a range greater than length', () => + it('should handle a range greater than length', function () { const container = new PIXI.Container(); let removed = []; @@ -462,7 +462,7 @@ expect(removed.length).to.be.equals(1); }); - it('should throw outside acceptable range', () => + it('should throw outside acceptable range', function () { const container = new PIXI.Container(); @@ -477,9 +477,9 @@ }); }); - describe('destroy', () => + describe('destroy', function () { - it('should not destroy children by default', () => + it('should not destroy children by default', function () { const container = new PIXI.Container(); const child = new PIXI.DisplayObject(); @@ -491,7 +491,7 @@ expect(child.transform).to.not.be.null; }); - it('should allow children destroy', () => + it('should allow children destroy', function () { let container = new PIXI.Container(); let child = new PIXI.DisplayObject(); @@ -515,9 +515,9 @@ }); }); - describe('width', () => + describe('width', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -529,7 +529,7 @@ expect(container.width).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -543,7 +543,7 @@ expect(container.scale.x).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); @@ -555,9 +555,9 @@ }); }); - describe('height', () => + describe('height', function () { - it('should reflect scale', () => + it('should reflect scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -569,7 +569,7 @@ expect(container.height).to.be.equals(20); }); - it('should adjust scale', () => + it('should adjust scale', function () { const container = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -583,7 +583,7 @@ expect(container.scale.y).to.be.equals(2); }); - it('should reset scale', () => + it('should reset scale', function () { const container = new PIXI.Container(); diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index ebf1195..7826e71 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.DisplayObject', () => +describe('PIXI.DisplayObject', function () { - describe('constructor', () => + describe('constructor', function () { - it('should initialise properties', () => + it('should initialise properties', function () { const object = new PIXI.DisplayObject(); @@ -14,7 +14,7 @@ expect(object.visible).to.be.true; }); - it('should set the correct Transform', () => + it('should set the correct Transform', function () { PIXI.settings.TRANSFORM_MODE = PIXI.TRANSFORM_MODE.DYNAMIC; @@ -30,9 +30,9 @@ }); }); - describe('setParent', () => + describe('setParent', function () { - it('should add itself to a Container', () => + it('should add itself to a Container', function () { const child = new PIXI.DisplayObject(); const container = new PIXI.Container(); @@ -43,7 +43,7 @@ expect(child.parent).to.equal(container); }); - it('should throw if not Container', () => + it('should throw if not Container', function () { const child = new PIXI.DisplayObject(); const notAContainer = {}; @@ -53,9 +53,9 @@ }); }); - describe('setTransform', () => + describe('setTransform', function () { - it('should set correct properties', () => + it('should set correct properties', function () { const object = new PIXI.DisplayObject(); @@ -72,7 +72,7 @@ expect(object.pivot.y).to.be.equal(9); }); - it('should convert zero scale to one', () => + it('should convert zero scale to one', function () { const object = new PIXI.DisplayObject(); @@ -83,9 +83,9 @@ }); }); - describe('worldVisible', () => + describe('worldVisible', function () { - it('should traverse parents', () => + it('should traverse parents', function () { const grandParent = new PIXI.Container(); const parent = new PIXI.Container(); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index 50f775b..2a64946 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.Graphics', () => +describe('PIXI.Graphics', function () { - describe('constructor', () => + describe('constructor', function () { - it('should set defaults', () => + it('should set defaults', function () { const graphics = new PIXI.Graphics(); @@ -16,9 +16,9 @@ }); }); - describe('lineTo', () => + describe('lineTo', function () { - it('should return correct bounds - north', () => + it('should return correct bounds - north', function () { const graphics = new PIXI.Graphics(); @@ -31,7 +31,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - south', () => + it('should return correct bounds - south', function () { const graphics = new PIXI.Graphics(); @@ -44,7 +44,7 @@ expect(graphics.height).to.be.equals(10); }); - it('should return correct bounds - east', () => + it('should return correct bounds - east', function () { const graphics = new PIXI.Graphics(); @@ -56,7 +56,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds - west', () => + it('should return correct bounds - west', function () { const graphics = new PIXI.Graphics(); @@ -69,7 +69,7 @@ expect(graphics.width).to.be.equals(10); }); - it('should return correct bounds when stacked with circle', () => + it('should return correct bounds when stacked with circle', function () { const graphics = new PIXI.Graphics(); @@ -88,7 +88,7 @@ expect(graphics.height).to.be.equals(100); }); - it('should return correct bounds when square', () => + it('should return correct bounds when square', function () { const graphics = new PIXI.Graphics(); @@ -104,9 +104,9 @@ }); }); - describe('containsPoint', () => + describe('containsPoint', function () { - it('should return true when point inside', () => + it('should return true when point inside', function () { const point = new PIXI.Point(1, 1); const graphics = new PIXI.Graphics(); @@ -117,7 +117,7 @@ expect(graphics.containsPoint(point)).to.be.true; }); - it('should return false when point outside', () => + it('should return false when point outside', function () { const point = new PIXI.Point(20, 20); const graphics = new PIXI.Graphics(); @@ -129,9 +129,9 @@ }); }); - describe('arc', () => + describe('arc', function () { - it('should draw an arc', () => + it('should draw an arc', function () { const graphics = new PIXI.Graphics(); @@ -142,7 +142,7 @@ expect(graphics.currentPath).to.be.not.null; }); - it('should not throw with other shapes', () => + it('should not throw with other shapes', function () { // complex drawing #1: draw triangle, rounder rect and an arc (issue #3433) const graphics = new PIXI.Graphics(); @@ -169,7 +169,7 @@ expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw(); }); - it('should do nothing when startAngle and endAngle are equal', () => + it('should do nothing when startAngle and endAngle are equal', function () { const graphics = new PIXI.Graphics(); @@ -180,7 +180,7 @@ expect(graphics.currentPath).to.be.null; }); - it('should do nothing if sweep equals zero', () => + it('should do nothing if sweep equals zero', function () { const graphics = new PIXI.Graphics(); @@ -192,9 +192,9 @@ }); }); - describe('_calculateBounds', () => + describe('_calculateBounds', function () { - it('should only call updateLocalBounds once', () => + it('should only call updateLocalBounds once', function () { const graphics = new PIXI.Graphics(); const spy = sinon.spy(graphics, 'updateLocalBounds'); diff --git a/test/core/Polygon.js b/test/core/Polygon.js index 16323cf..24bc6c9 100644 --- a/test/core/Polygon.js +++ b/test/core/Polygon.js @@ -1,17 +1,17 @@ 'use strict'; -describe('PIXI.Polygon', () => +describe('PIXI.Polygon', function () { - describe('constructor', () => + describe('constructor', function () { - it('should accept a spread of values', () => + it('should accept a spread of values', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); expect(polygon.points.length).to.be.equals(6); }); - it('should accept a spread of points', () => + it('should accept a spread of points', function () { const polygon = new PIXI.Polygon( new PIXI.Point(0, 0), @@ -22,14 +22,14 @@ expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of values', () => + it('should accept an array of values', function () { const polygon = new PIXI.Polygon([0, 0, 10, 0, 0, 10]); expect(polygon.points.length).to.be.equals(6); }); - it('should accept an array of points', () => + it('should accept an array of points', function () { const polygon = new PIXI.Polygon([ new PIXI.Point(0, 0), @@ -41,9 +41,9 @@ }); }); - describe('clone', () => + describe('clone', function () { - it('should create a copy', () => + it('should create a copy', function () { const polygon1 = new PIXI.Polygon(0, 0, 10, 0, 0, 10); const polygon2 = polygon1.clone(); @@ -63,9 +63,9 @@ }); }); - describe('close', () => + describe('close', function () { - it('should close the polygon if open', () => + it('should close the polygon if open', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10); @@ -78,7 +78,7 @@ expect(polygon.points[7]).to.be.equals(0); }); - it('should do nothing if already closed', () => + it('should do nothing if already closed', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 0, 10, 0, 0); @@ -90,9 +90,9 @@ }); }); - describe('contains', () => + describe('contains', function () { - it('should include points inside', () => + it('should include points inside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -102,7 +102,7 @@ expect(polygon.contains(9, 9)).to.be.true; }); - it('should exclude bounds', () => + it('should exclude bounds', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); @@ -112,7 +112,7 @@ expect(polygon.contains(10, 10)).to.be.false; }); - it('should exclude points outside', () => + it('should exclude points outside', function () { const polygon = new PIXI.Polygon(0, 0, 10, 0, 10, 10, 0, 10, 0, 0); diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 71f4355..40ca3b0 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -67,25 +67,6 @@ expect(rect2.contains(21, 21)).to.be.false; }); - it('should make rectangle grow', function () - { - const rect = new PIXI.Rectangle(10, 10, 10, 10); - - rect.pad(1, 1); - - expect(rect.left).to.equal(9); - expect(rect.top).to.equal(9); - expect(rect.right).to.equal(21); - expect(rect.bottom).to.equal(21); - - rect.pad(10, 10); - - expect(rect.left).to.equal(-1); - expect(rect.top).to.equal(-1); - expect(rect.right).to.equal(31); - expect(rect.bottom).to.equal(31); - }); - it('should enlarge rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -97,5 +78,91 @@ expect(rect1.top).to.equal(10); expect(rect1.right).to.equal(25); expect(rect1.bottom).to.equal(25); + + const rect3 = new PIXI.Rectangle(0, 0, 0, 0); + const rect4 = new PIXI.Rectangle(10, 10, 10, 10); + + rect4.enlarge(rect3); + + expect(rect4.left).to.equal(0); + expect(rect4.top).to.equal(0); + expect(rect4.right).to.equal(20); + expect(rect4.bottom).to.equal(20); + }); + + it('should pad a rectangle', function () + { + // Pad with X & Y + const rect = new PIXI.Rectangle(10, 10, 10, 10); + + rect.pad(10, 10); + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(30); + expect(rect.bottom).to.equal(30); + + // Pad with X + const rect1 = new PIXI.Rectangle(10, 10, 10, 10); + + rect1.pad(10); + + expect(rect1.left).to.equal(0); + expect(rect1.top).to.equal(0); + expect(rect1.right).to.equal(30); + expect(rect1.bottom).to.equal(30); + + // Pad with nothing + const rect2 = new PIXI.Rectangle(10, 10, 10, 10); + + rect2.pad(); + + expect(rect2.left).to.equal(10); + expect(rect2.top).to.equal(10); + expect(rect2.right).to.equal(20); + expect(rect2.bottom).to.equal(20); + + // Pad with Y + const rect3 = new PIXI.Rectangle(10, 10, 10, 10); + + rect3.pad(null, 10); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(20); + expect(rect3.bottom).to.equal(30); + }); + + it('should fit a rectangle', function () + { + const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); + + rect2.fit(rect1); + + expect(rect2.left).to.equal(0); + expect(rect2.top).to.equal(0); + expect(rect2.right).to.equal(0); + expect(rect2.bottom).to.equal(0); + + const rect3 = new PIXI.Rectangle(0, 0, 20, 20); + const rect4 = new PIXI.Rectangle(10, 0, 20, 20); + + rect3.fit(rect4); + + expect(rect3.left).to.equal(10); + expect(rect3.top).to.equal(0); + expect(rect3.right).to.equal(30); + expect(rect3.bottom).to.equal(20); + }); + + it('should generate an empty rectangle', function () + { + const rect = PIXI.Rectangle.EMPTY; + + expect(rect.left).to.equal(0); + expect(rect.top).to.equal(0); + expect(rect.right).to.equal(0); + expect(rect.bottom).to.equal(0); }); }); diff --git a/test/core/SpriteRenderer.js b/test/core/SpriteRenderer.js index 01e1f81..bfab7db 100644 --- a/test/core/SpriteRenderer.js +++ b/test/core/SpriteRenderer.js @@ -1,8 +1,8 @@ 'use strict'; -describe('SpriteRenderer', () => +describe('SpriteRenderer', function () { - it('can be destroyed', () => + it('can be destroyed', function () { const destroyable = { destroy: sinon.stub() }; const webgl = { @@ -20,7 +20,7 @@ expect(() => renderer.destroy()).to.not.throw(); }); - it('can be destroyed immediately', () => + it('can be destroyed immediately', function () { const webgl = { on: sinon.stub(), diff --git a/test/core/TransformStatic.js b/test/core/TransformStatic.js index bb9607a..e6443a9 100644 --- a/test/core/TransformStatic.js +++ b/test/core/TransformStatic.js @@ -1,10 +1,10 @@ 'use strict'; -describe('PIXI.TransformStatic', () => +describe('PIXI.TransformStatic', function () { - describe('setFromMatrix', () => + describe('setFromMatrix', function () { - it('should decompose negative scale into rotation', () => + it('should decompose negative scale into rotation', function () { const eps = 1e-3; @@ -32,7 +32,7 @@ expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); }); - it('should decompose mirror into skew', () => + it('should decompose mirror into skew', function () { const eps = 1e-3; @@ -60,7 +60,7 @@ expect(otherTransform.rotation).to.equal(0); }); - it('should apply skew before scale, like in adobe animate and spine', () => + it('should apply skew before scale, like in adobe animate and spine', function () { // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy diff --git a/test/core/index.js b/test/core/index.js index 405a557..2a056a2 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -1,5 +1,6 @@ 'use strict'; +require('./Application'); require('./TransformStatic'); require('./Bounds'); require('./Container'); diff --git a/test/core/util.js b/test/core/util.js index e851c90..dce6003 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -96,7 +96,7 @@ describe('getUrlFileExtension', function () { - it('should exist', () => + it('should exist', function () { expect(PIXI.utils.getUrlFileExtension) .to.be.a('function'); diff --git a/test/interaction/InteractionManager.js b/test/interaction/InteractionManager.js index 47d6819..2cf6d9d 100644 --- a/test/interaction/InteractionManager.js +++ b/test/interaction/InteractionManager.js @@ -81,4 +81,384 @@ expect(clickSpy).to.not.have.been.called; }); }); + + describe('overlapping children', function () + { + function getScene(callbackEventName) + { + const behindChild = new PIXI.Graphics(); + const frontChild = new PIXI.Graphics(); + const parent = new PIXI.Container(); + const behindChildCallback = sinon.spy(); + const frontChildCallback = sinon.spy(); + const parentCallback = sinon.spy(); + + behindChild.beginFill(0xFF); + behindChild.drawRect(0, 0, 50, 50); + behindChild.on(callbackEventName, behindChildCallback); + + frontChild.beginFill(0x00FF); + frontChild.drawRect(0, 0, 50, 50); + frontChild.on(callbackEventName, frontChildCallback); + + parent.addChild(behindChild, frontChild); + parent.on(callbackEventName, parentCallback); + + return { + behindChild, + frontChild, + parent, + behindChildCallback, + frontChildCallback, + parentCallback, + }; + } + + describe('when parent is non-interactive', function () + { + describe('when both children are interactive', function () + { + it('should callback front child when clicking front child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + + stage.addChild(scene.parent); + pointer.click(10, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.not.have.been.called; + }); + + it('should callback front child when clicking overlap', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + + stage.addChild(scene.parent); + pointer.click(40, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.not.have.been.called; + }); + + it('should callback behind child when clicking behind child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + + stage.addChild(scene.parent); + pointer.click(60, 10); + + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.behindChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.not.have.been.called; + }); + }); + + describe('when front child is non-interactive', function () + { + it('should not callback when clicking front child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + + stage.addChild(scene.parent); + pointer.click(10, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.parentCallback).to.not.have.been.called; + }); + + it('should callback behind child when clicking overlap', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + + stage.addChild(scene.parent); + pointer.click(40, 10); + + expect(scene.behindChildCallback).to.have.been.calledOnce; + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.parentCallback).to.not.have.been.called; + }); + + it('should callback behind child when clicking behind child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + + stage.addChild(scene.parent); + pointer.click(60, 10); + + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.behindChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.not.have.been.called; + }); + }); + + describe('when behind child is non-interactive', function () + { + it('should callback front child when clicking front child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + + stage.addChild(scene.parent); + pointer.click(10, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.not.have.been.called; + }); + + it('should callback front child when clicking overlap', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + + stage.addChild(scene.parent); + pointer.click(40, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.not.have.been.called; + }); + + it('should not callback when clicking behind child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + + stage.addChild(scene.parent); + pointer.click(60, 10); + + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.parentCallback).to.not.have.been.called; + }); + }); + }); + + describe('when parent is interactive', function () + { + describe('when both children are interactive', function () + { + it('should callback parent and front child when clicking front child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(10, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + + it('should callback parent and front child when clicking overlap', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(40, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + + it('should callback parent and behind child when clicking behind child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(60, 10); + + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.behindChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + }); + + describe('when front child is non-interactive', function () + { + it('should callback parent when clicking front child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(10, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + + /* TODO: Fix #3596 + it('should callback parent and behind child when clicking overlap', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(40, 10); + + expect(scene.behindChildCallback).to.have.been.calledOnce; + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + */ + + it('should callback parent and behind child when clicking behind child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.interactive = true; + scene.behindChild.x = 25; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(60, 10); + + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.behindChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + }); + + describe('when behind child is non-interactive', function () + { + it('should callback parent and front child when clicking front child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(10, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + + it('should callback parent and front child when clicking overlap', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(40, 10); + + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.frontChildCallback).to.have.been.calledOnce; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + + it('should callback parent when clicking behind child', function () + { + const stage = new PIXI.Container(); + const pointer = new MockPointer(stage); + const scene = getScene('click'); + + scene.behindChild.x = 25; + scene.frontChild.interactive = true; + scene.parent.interactive = true; + + stage.addChild(scene.parent); + pointer.click(60, 10); + + expect(scene.frontChildCallback).to.not.have.been.called; + expect(scene.behindChildCallback).to.not.have.been.called; + expect(scene.parentCallback).to.have.been.calledOnce; + }); + }); + }); + }); });