diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..1a0eaf2 --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,91 @@ +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.renderer.render(this.stage); + }); + + // Start the rendering + this.start(); + } + + /** + * 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; + } +} diff --git a/src/core/Application.js b/src/core/Application.js new file mode 100644 index 0000000..1a0eaf2 --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,91 @@ +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.renderer.render(this.stage); + }); + + // Start the rendering + this.start(); + } + + /** + * 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; + } +} 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/Application.js b/src/core/Application.js new file mode 100644 index 0000000..1a0eaf2 --- /dev/null +++ b/src/core/Application.js @@ -0,0 +1,91 @@ +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.renderer.render(this.stage); + }); + + // Start the rendering + this.start(); + } + + /** + * 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; + } +} 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/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';