diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index bf0b872..96d673f 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -1,5 +1,5 @@ import AbstractRenderer from './AbstractRenderer'; -import { sayHello } from '@pixi/utils'; +import { sayHello, isWebGLSupported } from '@pixi/utils'; import MaskSystem from './mask/MaskSystem'; import StencilSystem from './mask/StencilSystem'; import FilterSystem from './filters/FilterSystem'; @@ -33,6 +33,23 @@ export default class Renderer extends AbstractRenderer { /** + * Create renderer if WebGL is available. Overrideable + * by the **@pixi/canvas-renderer** package to allow fallback. + * throws error if WebGL is not available. + * @static + * @private + */ + static create(options) + { + if (isWebGLSupported()) + { + return new Renderer(options); + } + + throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.'); + } + + /** * @param {object} [options] - The optional renderer parameters. * @param {number} [options.width=800] - The width of the screen. * @param {number} [options.height=600] - The height of the screen. @@ -57,9 +74,9 @@ * for devices with dual graphics card. * @param {object} [options.context] If WebGL context already exists, all parameters must be taken from it. */ - constructor(options = {}, arg2, arg3) + constructor(options = {}) { - super('WebGL', options, arg2, arg3); + super('WebGL', options); // the options will have been modified here in the super constructor with pixi's default settings.. options = this.options; diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index bf0b872..96d673f 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -1,5 +1,5 @@ import AbstractRenderer from './AbstractRenderer'; -import { sayHello } from '@pixi/utils'; +import { sayHello, isWebGLSupported } from '@pixi/utils'; import MaskSystem from './mask/MaskSystem'; import StencilSystem from './mask/StencilSystem'; import FilterSystem from './filters/FilterSystem'; @@ -33,6 +33,23 @@ export default class Renderer extends AbstractRenderer { /** + * Create renderer if WebGL is available. Overrideable + * by the **@pixi/canvas-renderer** package to allow fallback. + * throws error if WebGL is not available. + * @static + * @private + */ + static create(options) + { + if (isWebGLSupported()) + { + return new Renderer(options); + } + + throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.'); + } + + /** * @param {object} [options] - The optional renderer parameters. * @param {number} [options.width=800] - The width of the screen. * @param {number} [options.height=600] - The height of the screen. @@ -57,9 +74,9 @@ * for devices with dual graphics card. * @param {object} [options.context] If WebGL context already exists, all parameters must be taken from it. */ - constructor(options = {}, arg2, arg3) + constructor(options = {}) { - super('WebGL', options, arg2, arg3); + super('WebGL', options); // the options will have been modified here in the super constructor with pixi's default settings.. options = this.options; diff --git a/packages/core/src/autoDetectRenderer.js b/packages/core/src/autoDetectRenderer.js new file mode 100644 index 0000000..ec4c7d5 --- /dev/null +++ b/packages/core/src/autoDetectRenderer.js @@ -0,0 +1,37 @@ +import { default as Renderer } from './Renderer'; + +/** + * 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 {object} [options] - The optional renderer parameters + * @param {number} [options.width=800] - the width of the renderers view + * @param {number} [options.height=600] - the height of the renderers view + * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 + * @param {boolean} [options.antialias=false] - sets antialias + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** + * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(options) +{ + return Renderer.create(options); +} diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index bf0b872..96d673f 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -1,5 +1,5 @@ import AbstractRenderer from './AbstractRenderer'; -import { sayHello } from '@pixi/utils'; +import { sayHello, isWebGLSupported } from '@pixi/utils'; import MaskSystem from './mask/MaskSystem'; import StencilSystem from './mask/StencilSystem'; import FilterSystem from './filters/FilterSystem'; @@ -33,6 +33,23 @@ export default class Renderer extends AbstractRenderer { /** + * Create renderer if WebGL is available. Overrideable + * by the **@pixi/canvas-renderer** package to allow fallback. + * throws error if WebGL is not available. + * @static + * @private + */ + static create(options) + { + if (isWebGLSupported()) + { + return new Renderer(options); + } + + throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.'); + } + + /** * @param {object} [options] - The optional renderer parameters. * @param {number} [options.width=800] - The width of the screen. * @param {number} [options.height=600] - The height of the screen. @@ -57,9 +74,9 @@ * for devices with dual graphics card. * @param {object} [options.context] If WebGL context already exists, all parameters must be taken from it. */ - constructor(options = {}, arg2, arg3) + constructor(options = {}) { - super('WebGL', options, arg2, arg3); + super('WebGL', options); // the options will have been modified here in the super constructor with pixi's default settings.. options = this.options; diff --git a/packages/core/src/autoDetectRenderer.js b/packages/core/src/autoDetectRenderer.js new file mode 100644 index 0000000..ec4c7d5 --- /dev/null +++ b/packages/core/src/autoDetectRenderer.js @@ -0,0 +1,37 @@ +import { default as Renderer } from './Renderer'; + +/** + * 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 {object} [options] - The optional renderer parameters + * @param {number} [options.width=800] - the width of the renderers view + * @param {number} [options.height=600] - the height of the renderers view + * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 + * @param {boolean} [options.antialias=false] - sets antialias + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** + * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(options) +{ + return Renderer.create(options); +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index cc09f43..d030b38 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -6,6 +6,7 @@ export { systems }; export { resources }; +export * from './autoDetectRenderer'; export { default as System } from './System'; export { default as Renderer } from './Renderer'; export { default as AbstractRenderer } from './AbstractRenderer'; diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index bf0b872..96d673f 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -1,5 +1,5 @@ import AbstractRenderer from './AbstractRenderer'; -import { sayHello } from '@pixi/utils'; +import { sayHello, isWebGLSupported } from '@pixi/utils'; import MaskSystem from './mask/MaskSystem'; import StencilSystem from './mask/StencilSystem'; import FilterSystem from './filters/FilterSystem'; @@ -33,6 +33,23 @@ export default class Renderer extends AbstractRenderer { /** + * Create renderer if WebGL is available. Overrideable + * by the **@pixi/canvas-renderer** package to allow fallback. + * throws error if WebGL is not available. + * @static + * @private + */ + static create(options) + { + if (isWebGLSupported()) + { + return new Renderer(options); + } + + throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.'); + } + + /** * @param {object} [options] - The optional renderer parameters. * @param {number} [options.width=800] - The width of the screen. * @param {number} [options.height=600] - The height of the screen. @@ -57,9 +74,9 @@ * for devices with dual graphics card. * @param {object} [options.context] If WebGL context already exists, all parameters must be taken from it. */ - constructor(options = {}, arg2, arg3) + constructor(options = {}) { - super('WebGL', options, arg2, arg3); + super('WebGL', options); // the options will have been modified here in the super constructor with pixi's default settings.. options = this.options; diff --git a/packages/core/src/autoDetectRenderer.js b/packages/core/src/autoDetectRenderer.js new file mode 100644 index 0000000..ec4c7d5 --- /dev/null +++ b/packages/core/src/autoDetectRenderer.js @@ -0,0 +1,37 @@ +import { default as Renderer } from './Renderer'; + +/** + * 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 {object} [options] - The optional renderer parameters + * @param {number} [options.width=800] - the width of the renderers view + * @param {number} [options.height=600] - the height of the renderers view + * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 + * @param {boolean} [options.antialias=false] - sets antialias + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** + * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(options) +{ + return Renderer.create(options); +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index cc09f43..d030b38 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -6,6 +6,7 @@ export { systems }; export { resources }; +export * from './autoDetectRenderer'; export { default as System } from './System'; export { default as Renderer } from './Renderer'; export { default as AbstractRenderer } from './AbstractRenderer'; diff --git a/packages/core/src/renderTexture/BaseRenderTexture.js b/packages/core/src/renderTexture/BaseRenderTexture.js index 042cab8..005edb6 100644 --- a/packages/core/src/renderTexture/BaseRenderTexture.js +++ b/packages/core/src/renderTexture/BaseRenderTexture.js @@ -11,7 +11,7 @@ * and rotation of the given Display Objects is ignored. For example: * * ```js - * let renderer = PIXI.autoDetectRenderer(1024, 1024); + * let renderer = PIXI.autoDetectRenderer(); * let baseRenderTexture = new PIXI.BaseRenderTexture(800, 600); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * let sprite = PIXI.Sprite.fromImage("spinObj_01.png"); diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index bf0b872..96d673f 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -1,5 +1,5 @@ import AbstractRenderer from './AbstractRenderer'; -import { sayHello } from '@pixi/utils'; +import { sayHello, isWebGLSupported } from '@pixi/utils'; import MaskSystem from './mask/MaskSystem'; import StencilSystem from './mask/StencilSystem'; import FilterSystem from './filters/FilterSystem'; @@ -33,6 +33,23 @@ export default class Renderer extends AbstractRenderer { /** + * Create renderer if WebGL is available. Overrideable + * by the **@pixi/canvas-renderer** package to allow fallback. + * throws error if WebGL is not available. + * @static + * @private + */ + static create(options) + { + if (isWebGLSupported()) + { + return new Renderer(options); + } + + throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.'); + } + + /** * @param {object} [options] - The optional renderer parameters. * @param {number} [options.width=800] - The width of the screen. * @param {number} [options.height=600] - The height of the screen. @@ -57,9 +74,9 @@ * for devices with dual graphics card. * @param {object} [options.context] If WebGL context already exists, all parameters must be taken from it. */ - constructor(options = {}, arg2, arg3) + constructor(options = {}) { - super('WebGL', options, arg2, arg3); + super('WebGL', options); // the options will have been modified here in the super constructor with pixi's default settings.. options = this.options; diff --git a/packages/core/src/autoDetectRenderer.js b/packages/core/src/autoDetectRenderer.js new file mode 100644 index 0000000..ec4c7d5 --- /dev/null +++ b/packages/core/src/autoDetectRenderer.js @@ -0,0 +1,37 @@ +import { default as Renderer } from './Renderer'; + +/** + * 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 {object} [options] - The optional renderer parameters + * @param {number} [options.width=800] - the width of the renderers view + * @param {number} [options.height=600] - the height of the renderers view + * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 + * @param {boolean} [options.antialias=false] - sets antialias + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** + * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(options) +{ + return Renderer.create(options); +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index cc09f43..d030b38 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -6,6 +6,7 @@ export { systems }; export { resources }; +export * from './autoDetectRenderer'; export { default as System } from './System'; export { default as Renderer } from './Renderer'; export { default as AbstractRenderer } from './AbstractRenderer'; diff --git a/packages/core/src/renderTexture/BaseRenderTexture.js b/packages/core/src/renderTexture/BaseRenderTexture.js index 042cab8..005edb6 100644 --- a/packages/core/src/renderTexture/BaseRenderTexture.js +++ b/packages/core/src/renderTexture/BaseRenderTexture.js @@ -11,7 +11,7 @@ * and rotation of the given Display Objects is ignored. For example: * * ```js - * let renderer = PIXI.autoDetectRenderer(1024, 1024); + * let renderer = PIXI.autoDetectRenderer(); * let baseRenderTexture = new PIXI.BaseRenderTexture(800, 600); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * let sprite = PIXI.Sprite.fromImage("spinObj_01.png"); diff --git a/packages/core/src/renderTexture/RenderTexture.js b/packages/core/src/renderTexture/RenderTexture.js index 6354b80..c3c1ddb 100644 --- a/packages/core/src/renderTexture/RenderTexture.js +++ b/packages/core/src/renderTexture/RenderTexture.js @@ -10,7 +10,7 @@ * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js - * let renderer = PIXI.autoDetectRenderer(1024, 1024); + * let renderer = PIXI.autoDetectRenderer(); * let renderTexture = PIXI.RenderTexture.create(800, 600); * let sprite = PIXI.Sprite.from("spinObj_01.png"); * diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index b4def4e..9f46973 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -1,7 +1,7 @@ import '@pixi/polyfill'; -import { Application, accessibility, interaction, prepare, extract } from 'pixi.js'; -import { autoDetectRenderer, CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; +import { accessibility, interaction, prepare, extract } from 'pixi.js'; +import { CanvasRenderer, CanvasTinter } from '@pixi/canvas-renderer'; import { CanvasMeshRenderer } from '@pixi/canvas-mesh'; import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; import { CanvasSpriteRenderer } from '@pixi/canvas-sprite'; @@ -22,13 +22,10 @@ Object.assign(prepare, canvasPrepare); Object.assign(extract, canvasExtract); -Application.prototype.createRenderer = autoDetectRenderer; - // Export ES for those importing specifically by name, // e.g., `import {autoDetectRenderer} from 'pixi.js-legacy'` export * from 'pixi.js'; export { - autoDetectRenderer, CanvasRenderer, CanvasGraphicsRenderer, CanvasMeshRenderer, diff --git a/packages/app/package.json b/packages/app/package.json index 97ac5b7..6ee1821 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -26,8 +26,7 @@ ], "dependencies": { "@pixi/core": "^5.0.0-rc.2", - "@pixi/display": "^5.0.0-rc.2", - "@pixi/settings": "^5.0.0-rc.2" + "@pixi/display": "^5.0.0-rc.2" }, "devDependencies": { "@pixi/canvas-renderer": "^5.0.0-rc.2", diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index f67dab1..b780acc 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -1,6 +1,5 @@ -import { settings } from '@pixi/settings'; import { Container } from '@pixi/display'; -import { Renderer } from '@pixi/core'; +import { autoDetectRenderer } from '@pixi/core'; /** * Convenience class to create a new PIXI application. @@ -37,8 +36,9 @@ * @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} [options.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present. - * This option is only available in the `pixi.js-legacy` package. + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or @@ -51,19 +51,8 @@ * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.Loaders.shared, `false` to create new Loader. * @param {Window|HTMLElement} [options.resizeTo] - Element to automatically resize stage to. */ - constructor(options, arg2, arg3, arg4, arg5) + constructor(options) { - // Support for constructor(width, height, options, noWebGL, useSharedTicker) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - forceCanvas: !!arg4, - sharedTicker: !!arg5, - }, arg3); - } - // The default options options = Object.assign({ forceCanvas: false, @@ -73,7 +62,7 @@ * WebGL renderer if available, otherwise CanvasRenderer. * @member {PIXI.Renderer|PIXI.CanvasRenderer} */ - this.renderer = this.createRenderer(options); + this.renderer = autoDetectRenderer(options); /** * The root display container that's rendered. @@ -99,17 +88,6 @@ } /** - * Create the new renderer, this is here to overridden to support Canvas. - * - * @protected - * @param {Object} [options] See constructor for complete arguments - */ - createRenderer(options) - { - return new Renderer(options); - } - - /** * Render the current stage. */ render() diff --git a/packages/canvas/canvas-renderer/src/Renderer.js b/packages/canvas/canvas-renderer/src/Renderer.js new file mode 100644 index 0000000..2f7702b --- /dev/null +++ b/packages/canvas/canvas-renderer/src/Renderer.js @@ -0,0 +1,29 @@ +import { Renderer } from '@pixi/core'; +import CanvasRenderer from './CanvasRenderer'; + +// Reference to Renderer.create static function +const parentCreate = Renderer.create; + +/** + * Override the Renderer.create to fallback to use CanvasRenderer. + * Also supports forceCanvas option with Application or autoDetectRenderer. + * @private + */ +Renderer.create = function create(options) +{ + const forceCanvas = options && options.forceCanvas; + + if (!forceCanvas) + { + try + { + return parentCreate(options); + } + catch (err) + { + // swallow WebGL-unsupported error + } + } + + return new CanvasRenderer(options); +}; diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js deleted file mode 100644 index a3134f9..0000000 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ /dev/null @@ -1,50 +0,0 @@ -import { isWebGLSupported } from '@pixi/utils'; -import { Renderer } from '@pixi/core'; -import CanvasRenderer from './CanvasRenderer'; - -/** - * 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 {object} [options] - The optional renderer parameters - * @param {number} [options.width=800] - the width of the renderers view - * @param {number} [options.height=600] - the height of the renderers view - * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for - * resolutions other than 1 - * @param {boolean} [options.antialias=false] - sets antialias - * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context - * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area - * (shown if not transparent). - * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or - * not before the new render pass. - * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 - * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. - * FXAA is faster, but may not always look as great **webgl only** - * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" - * for devices with dual graphics card **webgl only** - * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer - */ -export function autoDetectRenderer(options, arg1, arg2, arg3) -{ - // Backward-compatible support for noWebGL option - let forceCanvas = options && options.forceCanvas; - - if (arg3 !== undefined) - { - forceCanvas = arg3; - } - - if (!forceCanvas && isWebGLSupported()) - { - return new Renderer(options, arg1, arg2); - } - - return new CanvasRenderer(options, arg1, arg2); -} diff --git a/packages/canvas/canvas-renderer/src/index.js b/packages/canvas/canvas-renderer/src/index.js index a8fd078..deadfdb 100644 --- a/packages/canvas/canvas-renderer/src/index.js +++ b/packages/canvas/canvas-renderer/src/index.js @@ -1,6 +1,6 @@ export { default as CanvasRenderer } from './CanvasRenderer'; export { default as canUseNewCanvasBlendModes } from './utils/canUseNewCanvasBlendModes'; -export { autoDetectRenderer } from './autoDetectRenderer'; export { default as CanvasTinter } from './CanvasTinter'; +import './Renderer'; import './BaseTexture'; diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 57eb4ad..22c939c 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,19 +38,10 @@ * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). */ - constructor(system, options, arg2, arg3) + constructor(system, options) { super(); - // Support for constructor(system, screenWidth, screenHeight, options) - if (typeof options === 'number') - { - options = Object.assign({ - width: options, - height: arg2 || settings.RENDER_OPTIONS.height, - }, arg3); - } - // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index bf0b872..96d673f 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -1,5 +1,5 @@ import AbstractRenderer from './AbstractRenderer'; -import { sayHello } from '@pixi/utils'; +import { sayHello, isWebGLSupported } from '@pixi/utils'; import MaskSystem from './mask/MaskSystem'; import StencilSystem from './mask/StencilSystem'; import FilterSystem from './filters/FilterSystem'; @@ -33,6 +33,23 @@ export default class Renderer extends AbstractRenderer { /** + * Create renderer if WebGL is available. Overrideable + * by the **@pixi/canvas-renderer** package to allow fallback. + * throws error if WebGL is not available. + * @static + * @private + */ + static create(options) + { + if (isWebGLSupported()) + { + return new Renderer(options); + } + + throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.'); + } + + /** * @param {object} [options] - The optional renderer parameters. * @param {number} [options.width=800] - The width of the screen. * @param {number} [options.height=600] - The height of the screen. @@ -57,9 +74,9 @@ * for devices with dual graphics card. * @param {object} [options.context] If WebGL context already exists, all parameters must be taken from it. */ - constructor(options = {}, arg2, arg3) + constructor(options = {}) { - super('WebGL', options, arg2, arg3); + super('WebGL', options); // the options will have been modified here in the super constructor with pixi's default settings.. options = this.options; diff --git a/packages/core/src/autoDetectRenderer.js b/packages/core/src/autoDetectRenderer.js new file mode 100644 index 0000000..ec4c7d5 --- /dev/null +++ b/packages/core/src/autoDetectRenderer.js @@ -0,0 +1,37 @@ +import { default as Renderer } from './Renderer'; + +/** + * 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 {object} [options] - The optional renderer parameters + * @param {number} [options.width=800] - the width of the renderers view + * @param {number} [options.height=600] - the height of the renderers view + * @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.autoDensity=false] - Resizes renderer view in CSS pixels to allow for + * resolutions other than 1 + * @param {boolean} [options.antialias=false] - sets antialias + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 + * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present, this + * option only is available when using **pixi.js-legacy** or **@pixi/canvas-renderer** modules, otherwise + * it is ignored. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** + * @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer + */ +export function autoDetectRenderer(options) +{ + return Renderer.create(options); +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index cc09f43..d030b38 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -6,6 +6,7 @@ export { systems }; export { resources }; +export * from './autoDetectRenderer'; export { default as System } from './System'; export { default as Renderer } from './Renderer'; export { default as AbstractRenderer } from './AbstractRenderer'; diff --git a/packages/core/src/renderTexture/BaseRenderTexture.js b/packages/core/src/renderTexture/BaseRenderTexture.js index 042cab8..005edb6 100644 --- a/packages/core/src/renderTexture/BaseRenderTexture.js +++ b/packages/core/src/renderTexture/BaseRenderTexture.js @@ -11,7 +11,7 @@ * and rotation of the given Display Objects is ignored. For example: * * ```js - * let renderer = PIXI.autoDetectRenderer(1024, 1024); + * let renderer = PIXI.autoDetectRenderer(); * let baseRenderTexture = new PIXI.BaseRenderTexture(800, 600); * let renderTexture = new PIXI.RenderTexture(baseRenderTexture); * let sprite = PIXI.Sprite.fromImage("spinObj_01.png"); diff --git a/packages/core/src/renderTexture/RenderTexture.js b/packages/core/src/renderTexture/RenderTexture.js index 6354b80..c3c1ddb 100644 --- a/packages/core/src/renderTexture/RenderTexture.js +++ b/packages/core/src/renderTexture/RenderTexture.js @@ -10,7 +10,7 @@ * A RenderTexture takes a snapshot of any Display Object given to its render method. For example: * * ```js - * let renderer = PIXI.autoDetectRenderer(1024, 1024); + * let renderer = PIXI.autoDetectRenderer(); * let renderTexture = PIXI.RenderTexture.create(800, 600); * let sprite = PIXI.Sprite.from("spinObj_01.png"); * diff --git a/packages/ticker/src/Ticker.js b/packages/ticker/src/Ticker.js index ec44107..c49725e 100644 --- a/packages/ticker/src/Ticker.js +++ b/packages/ticker/src/Ticker.js @@ -558,7 +558,7 @@ * * @example * // You may use the shared ticker to render... - * let renderer = PIXI.autoDetectRenderer(800, 600); + * let renderer = PIXI.autoDetectRenderer(); * let stage = new PIXI.Container(); * document.body.appendChild(renderer.view); * ticker.add(function (time) {